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>