React – Uncaught TypeError: Cannot read property “name’ of undefined using Airtable Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React – Uncaught TypeError: Cannot read property “name’ of undefined using Airtable without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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>
We are here to answer your question about React – Uncaught TypeError: Cannot read property “name’ of undefined using Airtable - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji