React - Uncaught TypeError: Cannot read property "name' of undefined using Airtable

Question

I am building a small Survey component in React where the user can decide to upvote or not among different choices. Votes are registered in a table called "Survey" via Airtable

The problem I have is that I receive in the terminal an error called : TypeError: Cannot read property 'name' of undefined`

Which seems to be related to an undefined value that has 0 values. However I am 'map()' that specific array and don't understand what it is undefined:

survey.js

const Survey = () => {
  const [items, setItems] = React.useState([]);
  const [loading, setLoading] = useState(true);

    const getRecords = async () => {
      const records = await base('Survey').select({}).firstPage().catch(err => console.log(err));
      // console.log(records);
      const newRecords = records.map((record) => {
        // lets destructure to get the id and fields
        const {id, fields} = record;
        return {id, fields};
      })
      setItems(newRecords);
      setLoading(false);
    }

  useEffect(() => {
    getRecords();
    console.log(items)
  },[])

  return (
    <Wrapper className="section">
      <div className="container">
        <Title title="Survey" />
        <h3>most important room in the house?</h3>
        {loading ? (
          <h3>loading...</h3>
          ) : (
          <ul>
            {items.length > 0 && items[0].name.first}
            {items.map(item => {
              console.log(items);
              const {
                id, 
                fileds: { name, votes },
              } =item;

              return (
                <li ley={id}>
                  <div className="key">
                    {name.toUpperCase().substring(0,2)}
                  </div>
                  <div>
                    <h4>{name}</h4>
                    <p>{votes} votes</p>
                  </div>
                  <button onClick={() => console.log("clicked")}>
                    <FaVoteYea />
                  </button>
                </li>
              )
            })}
          </ul>)}
      </div>
    </Wrapper>
  )
}

I believe that part of the problem is due to the fact that the line blow, on pourposly set as initialization of arrays of object, is given no values (because I wanted to initialize it).

  const [items, setItems] = React.useState([]);

In the end the part that is causing the problem is below:

   {items.length > 0 && items[0].name.first}
   {items.map(item => {
      console.log(items);
      const {
         id, 
         fileds: { name, votes },
      } =item;

So far I studied this post and this other post. In particualr the last one seems to be useful but I am still not proficient in Angular and not totally understand Typescript yet, although I am working on it.

Then I also studied this post but could not still find an answer to my undefined variable.

Thanks for guiding to a potential solution.

Answer 1

In ES6 destructuring lets us streamline our code

so as you see

const {
         id, 
         fileds: { name, votes },
      } =item

is equivalent to

item.id // some id
item.fileds.name // some name i
item.fields.votes // some votes

in your case you distruct the object item but fileds is always in the classic form

your code should be

<h4>{fileds.name}</h4>
<p>{fileds.votes} votes</p>