What can I do to apply a prop to only one item in a map/array on the render method of a React component?

Question

I am trying to apply a change to only one item in an array depending on a prop. I have this list:

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>
 )  
}

In this case what I want is to only return null in the DataField component when it corresponds. Right now whenever that fileLimitWarning === true on the ContainerOfDataField component, it hides/removes/deletes all of the Typography nodes from the DataField component. So what I need is to hide only the index that matches where the problem is coming from.

Is it clear?

Answer 1

I think ideally you would define fileLimitWarning in each iteration of your map, since (I assume) it is a property of the current item, rather than a global property:

  return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            // { currentFile } = promoField???
            return (
              <DataField
                key={index}
                fileLimitWarning={currentFile?.size <= 250000000}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
    )  
  }