DEV Community

Mohammad Naimur Rahman
Mohammad Naimur Rahman

Posted on

React props & others

Hi, Dear Dev Community
Greetings!

There are several different ways to specify props in JSX.

String Literals



The above two JSX expressions are equivalent.

If you pass no value for a prop, it defaults to true.



The above two JSX expressions are equivalent.

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object.

function AppOne() {
return ;
}
function AppTwo() {
const props = {firstName: 'John', lastName: 'Hector'};
return ;
}
The above two JSX expressions are equivalent.

Children in JSX

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children. There are several different ways to pass children:

Hello world!

This is valid JSX, and props.children in MyComponent will simply be the string "Hello world!".
JSX removes whitespace at the beginning and ending of a line. It also removes blank lines.

You can pass any JavaScript expression as children, by enclosing it within {}.

foo
{'foo'}

The above two JSX expressions are equivalent.

False, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

{false}

{null}

{undefined}

{true}

Top comments (0)