DEV Community

Discussion on: A Clean Way to Conditionally Render Components

 
anxiny profile image
Anxiny

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Also, you can always check each property, but that is not recommended

<If condition={person.name}>...</If>
Enter fullscreen mode Exit fullscreen mode