Q:

Render undefined in react component?

Why react crashes when it access props of undefined cannot read property of undefined
ex One: Knowing that props.name is undefined this code will return an error.
const component = (props) => {
         return(
             <p>{props.name}</p>
     )
  }

ex Two: Why in this case it is ok for react to render without errors undefined which in this case would return invisible.
const componentTwo = () => {
         return(
             <p>{undefined}</p>
     )
  }

A:

Writing props.name should not give you the error cannot read property 'name' of undefined. If the name property doesn't exist on the props object, props.name will just be undefined.
However, if there is e.g. no person property on the props object, props.person will give you undefined. Trying to access name on undefined will then give rise to your error, because you can't access a property on undefined.
You could then use the && operator to make sure props.person is set before using props.person.name.
Example
const MyComponent = props => {
  return <p>{props.person && props.person.name}</p>;
};

Also make sure that your component names start with an uppercase letter, or the component will be interpreted as a string instead of as a variable when using it.

