Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).
Variables in JSX
Back in App.js, let's focus on line 5:
<img src={logo} className="App-logo" alt="logo" />
Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.
Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:
function App() {
const subject = "React";
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, World!
</p>
</header>
</div>
);
}
Change line 8 to use our subject variable instead of the word "world", like this:
function App() {
const subject = "React";
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, {subject}!
</p>
</header>
</div>
);
}
When you save, your browser should display "Hello, React!" instead of "Hello, world!"
Variables are convenient, but the one we've just set doesn't make great use of React's features. That's where props come in.
Component props
A prop is any data passed into a React component. React props are comparable to HTML attributes. Where HTML elements have attributes, React components have props. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value". In React, dataflow is unidirectional: props can only be passed from Parent components down to Child components; and props are read-only.
Let's open index.js and give our call its first prop.
Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:
root.render();
Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
function App() {
const subject = "React";
return (
// return statement
);
}
Change the signature of the App function so that it accepts props as a parameter, and delete the subject const. Just like any other function parameter, you can put props in a console.log() to print it to your browser's console. Go ahead and do that before the return statement, like so:
function App(props) {
console.log(props);
return (
// return statement
);
}
With this change, {subject} becomes undefined, so comment out the line Hello, {subject}! for now. Save your file and check your browser's JavaScript console. You should see something like this logged:
Object { subject: "Clarice" }
The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.
Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. Now, you can also uncomment the line Hello, {subject}! and, if you wish, delete your console.log().
function App(props) {
const subject = props.subject;
return (
// return statement
);
}
When you save, the app should now greet you with "Hello, Clarice!". If you return to index.js, edit the value of subject, and save, your text will change. Note that if you wanted to leave in the Hello line throughout this change, you could also have updated the JSX variable to {props.subject}.