Yes, it will cause an error. But it helps you write code in a more clean way. For example:
Since you will get an error by doing this way.
export default function App() { const [person, setData] = useState(null); return ( <div className="App"> <If condition={person}> <h4>{person.name}</h4> <p>{person.bio}</p> <ul> {person.attrs.map(({ name, value }) => { return <li key={name}>{value}</li>; })} </ul> </If> </div> ); }
It forced you to do things like this which results a cleaner code:
export default function App() { const [person, setData] = useState(null); return ( <div className="App"> <If condition={person}> <PersonCard person={person} /> <OtherThingThatUsePerson person={person}/> </If> </div> ); } function PersonCard({ person }) { return ( <div> <h4>{person.name}</h4> <p>{person.bio}</p> <ul> {person.attrs.map(({ name, value }) => { return <li key={name}>{value}</li>; })} </ul> </div> ); }
Also, you can always check each property, but that is not recommended
<If condition={person.name}>...</If>
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Yes, it will cause an error. But it helps you write code in a more clean way. For example:
Since you will get an error by doing this way.
It forced you to do things like this which results a cleaner code:
Also, you can always check each property, but that is not recommended