Estoy tratando de aplicar un cambio a un solo elemento en una matriz según un accesorio. tengo esta lista:
interface FieldProps { fileLimitWarning?: // I STILL NEED TO FIGURE THIS OUT } const DataField = (props: FieldProps) => { const { fileLimitWarning, handleFileSelection } = props; return ( <> {fileLimitWarning && <p>This file exceeds the max size of 250mb</p>} <input onChange={e => handleFileSelection(e.target.files)} /> </> } const ContainerOfDataField = () => { const [fileLimitWarning, setFileLimitWarning] = useState(false); const handleFileSelection = (files) => { setFileLimitWarning(false); const [currentFile] = files; if(currentFile?.size <= 250000000) { setFileLimitWarning(true); } } return ( <ul> { fields?.map((promoField: Field, index: number) => { return ( <DataField key={index} fileLimitWarning={fileLimitWarning} handleFileSelection={handleFileSelection} /> ); }) } </ul> ) } En este caso lo que quiero es que solo devuelva nulo en el componente DataField cuando corresponda. En este momento, cada vez que fileLimitWarning === true en el componente ContainerOfDataField , oculta/elimina/elimina todos los nodos de Typography del componente DataField . Entonces, lo que necesito es ocultar solo el índice que coincide con el origen del problema.
¿Está limpio?
Creo que idealmente definiría fileLimitWarning en cada iteración de su mapa, ya que (supongo) es una propiedad del elemento actual, en lugar de una propiedad global:
return ( <ul> { fields?.map((promoField: Field, index: number) => { // { currentFile } = promoField??? return ( <DataField key={index} fileLimitWarning={currentFile?.size <= 250000000} handleFileSelection={handleFileSelection} /> ); }) } </ul> ) }