CODEWITHSUNDEEP
reactjs
KYUN
KYUN

Reputation: 177

How can I get data from state

I'm trying to display data from a CSV file. I set the data using useState() method. but for some reason, It doesn't display, I have no idea what I'm wrong

like this : enter image description here

and this is my code:

import React, { useState } from "react";
import { CSVReader } from "react-papaparse";
import styled from "styled-components";

const View = () => {
  const [info, setInfo] = useState([
    { age: 14, name: "jake", phone: 456789, city: "seoul" },
  ]);
  const handleOnDrop = data => {
    setInfo(existing => [...existing, ...data]);
  };
  const handleOnError = (err, file, inputElem, reason) => {
    console.log(err);
  };

  const handleOnRemoveFile = data => {
    console.log(data);
  };

  console.log(info);
  return (
    <Menu>
      <CSVReader
        onDrop={handleOnDrop}
        onError={handleOnError}
        addRemoveButton
        onRemoveFile={handleOnRemoveFile}
        config={{ header: true }}
        style={{
          dropArea: {
            borderColor: "#467cf0",
            borderRadius: 20,
            width: 20,
            height: 200,
          },
        }}
      ></CSVReader>
      <ul>
        {info.map((info, index) => (
          <li key={index}>
            <p>Age:{info.age}</p>
            <p>Name:{info.name}</p>
            <p>Phone: {info.phone}</p>
            <p>City: {info.city}</p>
          </li>
        ))}
      </ul>
    </Menu>
  );
};

export default View;

`;
data length display but data information doesn't display at all

and <Menu> is style component ,

Upvotes: 0

Views: 94

Answers (1)

Nghia
Nghia

Reputation: 86

'data' is a property of each dropped item.
So you can not append your existing info without extracting them from dropped items.

const handleOnDrop = droppedItems => {
    const infos = droppedItems.map(item => item.data);

    setInfo(existing => [...existing, ...infos]);
};

Upvotes: 1

Related Questions