CODEWITHSUNDEEP
reactjs
Leticia Fatima
Leticia Fatima

Reputation: 522

Reactjs - get value from array

I have a list of images, I want to get the name of the image that is in the zero position of the matrix.

enter image description here

As you can see in the image, the name is inside File. But when I try items[0].file or items[0]['file'] the error TypeError returns: Cannot read property 'file' of undefined

My code:

export function Multiple() {

    const handleChange = files => {
      files.map(file => {
        setItems(item => [
          ...item,
          {
            file,
            onRemove: handleOnRemove,
            onClick: handleOnClick
          }
        ]);
      });
    };
  
    const handleOnRemove = file => {
      setItems(item => [...item.filter(item => item.file.name !== file.name)]);
    };
  
    const handleOnClick = file => {
      getBase64(file)
      setNameImage(file.name)
      setIsOpen(true)
    };
  
    const [items, setItems] = React.useState([]);
    const [isOpen, setIsOpen] = React.useState(false);
    const [nameImage, setNameImage] = React.useState('');
    const [codeImage, setCodeImage] = React.useState('');
  
    function getBase64(file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        setCodeImage(reader.result)
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
    }
  
    React.useEffect(() => {
      return console.log(items[0]['file'])
    }, [items]);
  
  
    return (
      <>
        <File
          name="image"
          label="Upload de imagens"
          onChange={handleChange}
          required={true}
          multiple={true}
        >
          {items.map((item, index) => (
            <File.Item {...item} key={index} />
          ))}
        </File>
  
        <Modal
          title={nameImage}
          onClose={() => setIsOpen(false)}
          show={isOpen}
        >
          <img src={codeImage} alt='Imagem' className='image' />
        </Modal>
      </>
    );
  }

Upvotes: 0

Views: 71

Answers (1)

&#199;ağatay Sel
&#199;ağatay Sel

Reputation: 810

When you first initialize items, it is an empty array so trying to log items[0].file will give error. Add undefined check. Also do not return it from useEffect. Return in useEffect is used for cleanup logic.

React.useEffect(() => {
 if(items[0] {
  console.log(items[0]['file'])
 }

}, [items]);

Upvotes: 2

Related Questions