react-props-and-expressions

Question 1

What are props in React?

Answer 1

Props in React are arguments (or “arbitrary inputs” per the official React docs) that you can pass into a React component. They can also be any JavaScript expression, but they must be surrounded by curly braces ( { } ).

Question 2

How do you pass props to a component?

Answer 2

First, you pass in “props” as a parameter to the component (“props” is an object). Then, inside the code block of the component, you specify the property of the “props” object. For example, if you want to pass in a “number” property of the “props” object, you specify “props.number” in the code block of the component. Then, when you use the component, you specify the property of the “props” object. For example, < NumberDescriber number = 2 / >.
If the property is a JavaScript expression, you must surround it with curly braces (i.e. < MyComponent foo = { 1 + 2 + 3 + 4 } / > ). Inside the code block of MyComponent, you would specify “props.foo”.

*Note: Added spaces to the examples to prevent Brainscape from interpreting any HTML text

Question 3

How do you write JavaScript expressions in JSX?

Answer 3

You must surround JavaScript expressions with curly braces in JSX