React can be daunting to start off with, but once you learn some basic concepts even the most complicated of interactions can be simple. The thing to remember is you can only really influence three basic things
- Children
- Props
- State
So let's learn them.
Children
All React apps start from a single component, which is sometimes called the 'entry point' for your application:
ReactDOM.render(<App />, rootElement);
Here, <App />
is our 'entry point'. It's the component from which any other component in our application needs to be a child of. We can then define <App />
to be something like this:
export default function App() {
return (
<Child>
<GrandChild />
</Child>
);
}
The structure is <App> -> <Child> -> <GrandChild>
with each being a 'child' of it's parent.
Props
The second fundamental concept is the properties that you provide to your components. Properties, are variables that the parent wants to share with a child. The child can then make use of these properties - shortened to props
. Properties are defined to a child, and subsequently consumed by a child as follows:
const Child = (props) => (
<p>Hi, my name is {props.name} </p>
);
export default function App() {
return (
<div>
<Child name="Billy" />
<Child name="Mary" />
<Child name="Colin" />
</div>
);
}
Here, each child is provided a different value for 'name' and the Child
component itself uses the name provided in the props
object. When using functional components like this, props
is always the first argument to your function, if you were using class Child extends React.Component
you would need to use this.props
but otherwise it works the same. Props can contain anything you want, the only preset prop is children
which are 'children' provided by the parent, for example:
const Child = (props) => (
<div>
<p>Hey I am a child</p>
{props.children && <div>And I have my own children {props.children}</div>}
</div>
);
const GrandChild = () => <p>Hey I am a grandchild!</p>;
export default function App() {
return (
<Child>
<GrandChild />
</Child>
);
}
A <GrandChild>
is being provided to the <Child>
by the <App>
. This will be accessible to the <Child>
using props.children
. You can see in the Child
function that we are checking if props.children
is set and if it is we are rendering them in the <div>
component.
State
So we have seen what a parent
can provide to a child
through props
, but what if the child itself wants to maintain some data of it's own. This is where 'state' comes in, and effectively state is a variable that lives inside of a component and exists during the lifetime of that component. There are some differences between 'functional' and 'class' based components, here I will be talking exclusively about the 'functional' format for state management. Let's look at a really simple example:
const names = ['Mary', 'Bill', 'Fred', 'Juan']
export default function App() {
return (
<div>
<h1>Today is who's birthday?</h1>
<ul>
{names.map((name) => <li>{name}</li>)}
</ul>
</div>
);
}
Here we have a simple array of names, which our component is then rendering into a list. We want to maintain 'state' of who's birthday it actually is. One really simple way would be to include a variable as follows:
const names = ["Mary", "Bill", "Fred", "Juan"];
export default function App() {
const birthdayPerson = "Bill";
return (
<div>
<h1>Today is who's birthday?</h1>
<ul>
{names.map((name) => (
<li>{`${name}${
name === birthdayPerson ? " HAPPY BIRTHDAY!!!" : ""
}`}</li>
))}
</ul>
</div>
);
}
We can change the birthdayPerson
to equal anyone from the list, but currently it's hardcoded. What if we want the user to be able to click one of the names in the list, thereby setting the birthdayPerson
to that person. Sadly we can't just create our own variable and update it because React works by re-rendering changes when it detects a change - so it needs help detecting those changes. So the following won't work:
const names = ["Mary", "Bill", "Fred", "Juan"];
export default function App() {
let birthdayPerson = "Bill";
return (
<div>
<h1>Today is who's birthday?</h1>
<ul>
{names.map((name) => (
// this won't work!
<li onClick={() => (birthdayPerson = name)}>{`${name}${
name === birthdayPerson ? " HAPPY BIRTHDAY!!!" : ""
}`}</li>
))}
</ul>
</div>
);
}
Instead, we need to use the useState
hook. useState
is a 'hook' function built into React that allows us to declare a variable and get a function that allows us to change this variable. This way React knows when the variable has changed so can compute the new render and decide what needs to update efficiently.
import React, {useState} from 'react';
const names = ["Mary", "Bill", "Fred", "Juan"];
export default function App() {
const [birthdayPerson, setBirthdayPerson] = useState("Fred");
return (
<div>
<h1>Today is who's birthday?</h1>
<ul>
{names.map((name) => (
<li onClick={() => setBirthdayPerson(name)}>{`${name}${
name === birthdayPerson ? " HAPPY BIRTHDAY!!!" : ""
}`}</li>
))}
</ul>
</div>
);
}
Always remember to import useState
when you want to use it. useState
is a function that will provide your component with an array. The first thing in the array is the current value for the state, with the argument passed into useState(arg)
being the initial
state (in the above case birthdayPerson === "Fred"
). The second thing in the array is the function to call that will update the value, and will take care of Reacts re-rendering for you. In the above example the onClick
of each list item is using it to setBirthdayPerson(name)
where name
is the name for that particular item in the names array.
Bringing it all together.
So now you have children
and then parents are providing props
to it. Each component can now also have their own state
for managing things, but now we want to tie these things together. Well there isn't much else to cover, just that state
and the functions to update it can be fed into props
... and this is really where the basic building blocks open into a lot of possibilities.
The Spec
We want to make an address book, names on the left that we can selected, and on the right we see more information for the selected name. We will have a data source for our address book which is just an array of objects like this:
{
_id: "5f90374ad2e52f3fbe46d149",
name: {
first: "Bentley",
last: "Rosales"
},
company: "ACUSAGE",
phone: "+1 (961) 423-2258",
address: "930 Eckford Street, Elfrida, Vermont, 1570",
photoUrl:
"https://avatars.dicebear.com/api/avataaars/5f90374ad2e52f3fbe46d149.svg"
}
We want the list to show just a first name, but on selected we want to see their address, phone number, company, and of course their picture!
Component Structure
So like everything we have a single point of entry, this will be our <App>
. Our <App>
will then have two child components <List>
- which shows our selectable list of people, and <View>
- which shows the currently selected person.
This is one of the simplest components so it makes sense to build this one first. All it needs is the right structure to render what the information we want, and a single prop
selectedPerson
.
const View = (props) => {
const { selectedPerson } = props;
return (
<div className="view">
{selectedPerson ? (
<Fragment>
<div className="view-heading">
<img src={selectedPerson.photoUrl} />
<h2>
{selectedPerson.name.first} {selectedPerson.name.last}
</h2>
</div>
<p>
<b>{selectedPerson.company}</b>
</p>
<p>{selectedPerson.address}</p>
</Fragment>
) : (
<p>No one selected</p>
)}
</div>
);
};
This is working just using props
and a single selectedPerson
prop is expected. If this isn't set we show <p>No one selected</p>
otherwise we show the data of the person.
Next up is the list component, this has to take a few different sources of information from props
. First it needs the people
which is the array of names to display. Second, it needs to know if there is a selectedPerson
so that it can show that that person is selected in the list. Finally it needs to know how to update or setSelectedPerson
so when a name is clicked it can set the selected person to whoever was clicked. All of this will be provided as props:
const List = (props) => {
const { people, selectedPerson, setSelectedPerson } = props;
return (
<div className="list">
{people.map((person) => (
<div
onClick={() => setSelectedPerson(person)}
className={
person === selectedPerson ? "list-item selected" : "list-item"
}
key={`person_${person._id}`}
>
{person.name.first}
</div>
))}
</div>
);
};
So you can see we have a list of people
which we then map and turn into <div>
elements with the persons first name rendered. We also check if the person
that we are iterating over is equal to selectedPerson
and if so we set a different CSS className
. The <div>
also gets given an onClick
function which will invoke the setSelectedPerson
prop with the respective person.
So now we have to tie the two things together, and really the only place to do this is in the parent <App>
component. This can feed the people
, selectedPerson
and setSelectedPerson
properties to the <List>
and can provide the <View>
with the selectedPerson
property.
import peopleData from "./data";
export default function App() {
const [selectedPerson, setSelectedPerson] = useState();
return (
<div className="address_book">
<List
selectedPerson={selectedPerson}
setSelectedPerson={setSelectedPerson}
people={peopleData}
/>
<View selectedPerson={selectedPerson} />
</div>
);
}
The only things we need here are to import the peopleData
from our file that has the array of people for the address book, and to create a state variable that holds the selectedPerson
. We don't provide an initial value for selectedPerson
in the useState()
call - because we have ensured that the <View>
can deal with this being empty.
You can find all of this in a neat sandbox below. Enjoy!
Top comments (0)