Estoy trabajando en un sitio web y he estado trabajando con un cuadro de selección bastante dinámico. Soy bastante nuevo en React en general, y aunque el cuadro de selección funciona en términos de la funcionalidad de mi aplicación... Parece que no puedo encontrar una buena manera de agregar la propiedad seleccionada a una opción una vez que ha sido seleccionado. Me pregunto si hay una mejor manera de hacer esto. Esto es con lo que estoy trabajando (todavía no creé el componente para "activeProp"):
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 SubFilterSelectEn primer lugar , debe evitar anidar componentes dentro del componente principal. Se vuelve más difícil mantener el código a medida que crece. En su lugar, debe adoptar la división de código.
En segundo lugar , puede usar operadores ternarios en lugar de if(s) , ya que son mucho más limpios.
En tercer lugar , puede evitar escribir props varias veces desestructurando argumentos Destructuring Assignments .
En cuarto lugar , adopte el principio SECO (no se repita).
Su código debe ser algo como esto:
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