No hardcoding

[NouraldinS]

SpaceX/src/components/RecentLaunches/index.jsx

Lines 342 to 354 in 388b2a2

	<Option value="2020">2020</Option>
	<Option value="2019">2019</Option>
	<Option value="2018">2018</Option>
	<Option value="2017">2017</Option>
	<Option value="2016">2016</Option>
	<Option value="2015">2015</Option>
	<Option value="2014">2014</Option>
	<Option value="2013">2013</Option>
	<Option value="2012">2012</Option>
	<Option value="2011">2011</Option>
	<Option value="2010">2010</Option>
	<Option value="2009">2009</Option>
	<Option value="2008">2008</Option>

SpaceX/src/components/RecentLaunches/index.jsx

Lines 424 to 483 in 388b2a2

	<Modal title="Settings" footer={null} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
	<div className="switches">
	<Row>
	<Col span={50}>Mission icon : </Col>
	<Col span={50}><img src={smallData?.mission_icon} alt="icon" style={{ width: '40px' }} /></Col>
	</Row>
	<Row>
	<Col span={50}>Launch site : </Col>
	<Col span={50}>{smallData?.launch_site}</Col>
	</Row>
	<Row>
	<Col span={50}>Rocket Name : </Col>
	<Col span={50}>{smallData?.rocket_name}</Col>
	</Row>
	<Row>
	<Col span={50}>Launch date : </Col>
	<Col span={50}>{smallData?.launch_date}</Col>
	</Row>
	<Row>
	<Col span={50}>Mission name : </Col>
	<Col span={50}>{smallData?.mission_name}</Col>
	</Row>
	<Row>
	<Col span={50}>Is upcoming : </Col>
	<Col span={50}>{smallData?.is_upcoming ? 'Yes' : 'No'}</Col>
	</Row>
	<Row>
	<Col span={50}>Media : </Col>
	<Col span={50}>{smallData?.media.map((e, index) => <a key={index} href={e}>link </a>)}</Col>
	</Row>
	<Row>
	<Col span={50}>Images : </Col>
	<Col span={50} className="grid-container">{smallData?.images.map((e, index) => <img className="grid-item" key={index} src={e} alt="rocketImage" style={{ width: '26px' }} />)}</Col>
	</Row>
	<Row>
	<Col span={50}>Rocket active : </Col>
	<Col span={50}>{smallData?.rocketActive ? 'Yes' : 'No'}</Col>
	</Row>
	<Row>
	<Col span={50}>Cost per launch : </Col>
	<Col span={50}>{smallData?.cost_per_launch}</Col>
	</Row>
	<Row>
	<Col span={50}>Mass : </Col>
	<Col span={50}>{smallData?.mass[weight]}</Col>
	</Row>
	<Row>
	<Col span={50}>Diameter : </Col>
	<Col span={50}>{smallData?.diameter[distance]}</Col>
	</Row>
	<Row>
	<Col span={50}>Success rate : </Col>
	<Col span={50}>{smallData?.success_rate_pct}</Col>
	</Row>
	<Row>
	<Col span={50}>Rocket Description : </Col>
	<Col span={50}>{smallData?.description}</Col>
	</Row>
	</div>
	</Modal>

SpaceX/src/components/RecentLaunches/index.jsx

Lines 357 to 383 in 388b2a2

	<Select defaultValue={name || 'Rocket Name'} style={{ width: 130, marginLeft: 50 }} allowClear onChange={handleOnNameChange}>
	{names.map((e, index) => <Option key={index} value={e}>{e}</Option>)}
	</Select>
	<Select defaultValue={core || 'Core'} style={{ width: 100, marginLeft: 50 }} allowClear onChange={handleOnCoreChange}>
	<Option value="true">reused</Option>
	<Option value="false">not reused</Option>
	</Select>
	<Select defaultValue={fairings || 'Fairings'} style={{ width: 100, marginLeft: 50 }} allowClear onChange={handleOnFairingsChange}>
	<Option value="true">reused</Option>
	<Option value="false">not reused</Option>
	</Select>
	<Select defaultValue={missionId || 'Mission ID'} style={{ width: 110, marginLeft: 50 }} allowClear onChange={handleOnMissionIdChange}>
	{missionsIds.map((e, index) => <Option key={index} value={e}>{e}</Option>)}
	</Select>
	<Select defaultValue={launching || 'Launching Success'} style={{ width: 160, marginLeft: 50 }} allowClear onChange={handleOnLaunchingChange}>
	<Option value="true">Success</Option>
	<Option value="false">Failed</Option>
	</Select>
	<Select defaultValue={landing || 'Landing Success'} style={{ width: 160, marginLeft: 50 }} allowClear onChange={handleOnLandingChange}>
	<Option value="true">Success</Option>
	<Option value="false">Failed</Option>
	</Select>

In these sections, options and labels are hard coded, it's a much better practice to store the schema of your forms in one place "Like a JSON object", which will contain the labels and general options, and then use that JSON object in your components, rather than hardcoding the values into JSX.

[NouraldinS]

The target is similar to your columns object.