@Skidragon
Posted
Hi @tomsky90, nice job on the dark mode and filtering. I do recommend to setup prettier to format your code to make it look nicer and not worry about formatting code. Also the components need to be simplified more, for example:
const HomePage = ({
error,
setError,
darkMode,
countriesListData,
countriesDataForDisplay,
setCountriesDataForDisplay,
selectValue,
setSelectValue,
inputValue,
setInputValue,
}) => {
return (
<div>
<Form
setError={setError}
darkMode={darkMode}
countriesListData={countriesListData}
countriesDataForDisplay={countriesDataForDisplay}
setCountriesDataForDisplay={setCountriesDataForDisplay}
selectValue={selectValue}
setSelectValue={setSelectValue}
inputValue={inputValue}
setInputValue={setInputValue}
/>
this is like saying in vanilla js land Form(setError, darkMode, countriesListData, countriesDataForDisplay, setCountriesDataForDisplay, selectValue, setSelectValue, inputValue, setInputValue), I as a developer of this re-usable component wouldn't want to deal with. It needs to be more generic of a form. For example:
<Form
isDarkMode={true} //the "is" tells me it's a boolean
data={[]}
onSubmit={() => {
// fetch, set your countries, set errors, and set load here
}}
onInputValueChange={() => {}}
onSelectValueChange={() => {}}
This way you can re-use the component in more than one place.
@tomsky90
Posted
@Skidragon I thought it was getting a little bit out of control but didn't know how to sort it. Thank you for your advice, I will bare that in mind and try to implement it.