I am working on a website and had a fairly dynamic select box I have been working with. I am fairly new to React in general, and while the select box is working in terms of the functionality of my app...I cannot seem to be able to find a good way to add the selected property to an option once it has been selected. I am wondering if there is a better way to do this? Here is what I am working with (I didn't create the component for "activeProp" yet):
import styles from '../../styles/Components/SubFilterSelect.module.scss';
const SubFilterSelect = (props) => {
const handleChange = (event) => {
const value = event.target.value
props.subFunc(value)
}
const Application = (props) => {
if(props.item && props.item.data.parent_category === 'Application'){
return(
<option value={props.item.id}>{props.item.data.name}</option>
)
} else{
return null
}
}
const Benefit = (props) => {
if(props.item && props.item.data.parent_category === 'Benefit'){
return(
<option value={props.item.id}>{props.item.data.name}</option>
)
} else{
return null
}
}
const ReturnCategories = () => {
if(props.activeApp){
return(
<select onChange={handleChange} defaultValue={'DEFAULT'}>
<option value='DEFAULT'>Choose a Category</option>
{props.categories.map((category,key) =>
<Application key={key} item={category} />
)}
</select>
)
} else if(props.activeBenefit){
return(
<select onChange={handleChange} defaultValue={'DEFAULT'}>
<option value='DEFAULT'>Choose a Category</option>
{props.categories.map((category,key) =>
<Benefit key={key} item={category} />
)}
</select>
)
} else if(props.activeProp){
return(
<select onChange={handleChange} defaultValue={'DEFAULT'}>
<option value='DEFAULT'>Choose a Category</option>
{props.categories.map((category,key) =>
{category.data.parent_category === 'Property' ?
<option key={key} id={category.id}>{category.data.name}</option>
: ''}
)}
</select>
)
} else{
return(
<select defaultValue={'DEFAULT'}>
<option value='DEFAULT'>Choose a Filter Above</option>
</select>
)
}
}
return(
<section className={styles.filterSection}>
<ReturnCategories />
</section>
)
}
export default SubFilterSelect
Firstly , You should avoid nesting components inside the parent component. It becomes harder to maintain code as it grows. Instead you should adopt code-splitting.
Secondly, you can use ternary operators instead of if(s) as they are much cleaner.
Thirdly, you can avoid writing props multiple times by destructuring arguments Destructuring Assignments.
Fourthly, adopt DRY principle (don't repeat yourself).
Your code should be something like this:
import styles from '../../styles/Components/SubFilterSelect.module.scss';
const SubFilterSelect = ({subFunc, activeApp , activeBenefit , activeProp}) => {
const handleChange = (event) => {
const value = event.target.value
subFunc(value)
}
return(
<section className={styles.filterSection}>
<ReturnCategories handleChange={handleChange}
activeApp={activeApp} activeProp={activeProp} activeBenefit={activeBenefit}/>
</section>
)
}
const ReturnCategories = ({handleChange , activeApp , activeBenefit , activeProp}) =>{
return(
<select onChange={handleChange} defaultValue={'DEFAULT'}>
<option value='DEFAULT'>Choose a Category</option>
{categories.map((category,key) => {
return(
activeApp ? <Application key={key} item={category} /> :
activeBenefit ? <Benefit key={key} item={category} /> :
activeProp && category.data.parent_category === 'Property' ?
<option key={key} id={category.id}>{category.data.name}</option> :
<option value='DEFAULT'>Choose a Filter Above</option>
)
}
)}
</select>
)
}
const Application = ({item}) => {
if(item && item.data.parent_category === 'Application'){
return(
<option value={item.id}>{item.data.name}</option>
)
} else{
return null
}
}
const Benefit = ({item}) => {
if(item && item.data.parent_category === 'Benefit'){
return(
<option value={item.id}>{item.data.name}</option>
)
} else{
return null
}
}
export default SubFilterSelect