At the moment our app is showing a single restaurant card. What if we want to show multiple cards with the same design but for different restaurants? One approach is to simply copy and paste our jsx and state for as many times as the number of cards we want to show. But this is poor code design because we are unnecessarily repeating code, and also not developer-friendly because our App.jsx file will literally grow in proportional to the number of cards that users want to show.
Just like how functions in programming can separate responsibilities and eliminate repeated code while accounting for differing input data, in React we create reusable components that are responsible for displaying varying inputs in a specific format. In this project, our code that renders a restaurant card can be reused for different food restaurants.
Make a new components folder in src . This new folder will store any reusable components that we create. Inside src/components create a file Card.jsx and add in this template for a basic React component:
![new Card.jsx component](https://imgur.com/3qnvh1a.png)
We want this Card
component to render the restaurant card we made in App.jsx . Cut and paste that JSX into the return of this Card
component. Remember to wrap it in parentheses. Also be sure to move the star.svg and Card.css imports from App.jsx to Card.jsx (hint: the path from Card.jsx to Card.css is "../styles/Card.css" where ".." means "the parent folder of the folder that contains this file").
import '../styles/Card.css'
import { ReactComponent as Star } from '../assets/star.svg'
const Card = () => {
const renderStars = (numStars) => {
let stars = []
for (let i = 0; i < numStars; i++) {
stars.push(
<Star key={i} className='starIcon' />
)
}
return stars
}
return (
<div className="card">
<h3>{name}</h3>
<h4>{tags.join(" • ")}</h4>
<h4>{address}</h4>
<h4>
<a href={website} target="blank">
{website}
</a>
</h4>
<p>{notes}</p>
<div className="metricsContainer">
<div className="ratingContainer">
Rating {rating}/5
{renderStars(rating)}
</div>
<div className="visitsContainer">Visited {visits} times</div>
</div>
</div>
)
}
export default Card
Now back in src/App.jsx import the Card
component and render it.
import './styles/App.css'
import './styles/Card.css'
import logo from './assets/logo512.png'
import { ReactComponent as Star } from './assets/star.svg'
import { useState } from 'react'
import Card from './components/Card'
const App = () => {
...
return (
<>
<header>
<nav>
Food
<img src={logo} alt="logo" />
Places
</nav>
</header>
<main>
<h1>My List</h1>
<p>
Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
to keep a record of either because I like them, dislike them, or would like to find out.
</p>
<Card />
</main>
</>
)
}
These changes won't work just yet because the state in Card.jsx is undefined. But instead of moving all state from App.jsx to Card.jsx , we're going to do something slightly different. In App.jsx we'll replace all of our state variables with a single state called place
which will store all the info for our restaurant in a single JavaScript Object. A JavaScript Object is a type of data structure which stores key-value pairs.
const App = () => {
const [place, setState] = useState({
"name": "Machiavelli Ristorante Italiano",
"tags": ["Pizza", "Pasta"],
"address": "123 Clarence St, Sydney NSW 2000",
"website": "https://www.machiavelli.com.au",
"notes": "Authentic Italian restaurant serving a traditional Neapolitan cuisine. The Linguine Gamberi was good value but a little bland in flavour.",
"rating": 4,
"visits": 3
})
return (
...
)
}
To let our Card
component access this state, we pass it as a "property" or "prop" of the Card
component. We can name the property anything we like, such as info
.
const App = () => {
...
return (
<>
<header>
<nav>
Food
<img src={logo} alt="logo" />
Places
</nav>
</header>
<main>
<h1>My List</h1>
<p>
Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
to keep a record of either because I like them, dislike them, or would like to find out.
</p>
<Card info={place}/>
</main>
</>
)
}
Finally, to access this state in our Card
component, declare a props
argument for our Card
function and add props.info
to the beginning of all state variables. As an example, for props.info.name
it means to access the value associated with the name
key in the place
object that was passed into the info
prop of the Card
component.
const Card = (props) => {
...
return (
<div className="card">
<h3>{props.info.name}</h3>
<h4>{props.info.tags.join(" • ")}</h4>
<h4>{props.info.address}</h4>
<h4>
<a href={props.info.website} target="blank">
{props.info.website}
</a>
</h4>
<p>{props.info.notes}</p>
<div className="metricsContainer">
<div className="ratingContainer">
Rating {props.info.rating}/5
{renderStars(props.info.rating)}
</div>
<div className="visitsContainer">Visited {props.info.visits} times</div>
</div>
</div>
)
}
![](https://imgur.com/Ad61UQl.png)
The refactor is now complete and our app should work as it did before. This work of extracting some JSX into its own component might seem tiresome and pointless, but it is good for a couple reasons:
- it makes both our
App
andCard
components smaller, less cluttered and responsible for fewer things, - it allows the
Card
component to be reused for different input data.
Let's render multiple food places with our new Card
component. In src/App.jsx import the dummy restaurant data from src/assets/data.json .
import './styles/App.css'
import './styles/Card.css'
import logo from './assets/logo512.png'
import { useState } from 'react'
import Card from './components/Card'
import placesInfo from './assets/data.json'
const App = () => {
...
}
Replace the place
state with a places
state assigned initially to the array of objects placesInfo
imported from data.json . This array contains objects of restaurant info in the same format as our previous place
object.
const App = () => {
const [places, setPlaces] = useState(placesInfo)
return (
...
)
}
To display a card for each restaurant in the list, we'll use the JavaScript Array.map
method which transforms each object in the array into a <Card />
component.
const App = () => {
const [places, setStates] = useState(placesInfo)
return (
<>
<header>
<nav>
Food
<img src={logo} alt="logo" />
Places
</nav>
</header>
<main>
<h1>My List</h1>
<p>
Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
to keep a record of either because I like them, dislike them, or would like to find out.
</p>
{places.map((place, i) => <Card key={i} info={place}/>)}
</main>
</>
)
}
The Array.map
method takes an argument: a function taking in an array item and returning something else to replace it. We pass in an arrow function which takes in two arguments: a place
which is an item from the places
array, and i
which is simply the index of the current item (starting from 0). The arrow function the returns a <Card key={i} info={place} />
. Remember each component in a list must have a unique key
prop, which we use i
for.
Our app now renders a list of cards of all restaurants specfied in the places
array.
![](https://imgur.com/wc2JBvd.png)
That's all for this series of tutorials, well done on making it to the end! The fundamental concepts that you have learned here including components, props and state will be useful in all future ReactJS projects that you work on.
There are also many more things to learn which we haven't covered in this series. What if you want to provide a form to add more restaurants, or increase visits
count for a restaurant? These features can be achieved using things called event handlers, which ReactJS does very similarly to HTML. There are plenty of resources online including other articles, videos and documentation to teach you those things. The best way to learn how to use them is to continue building projects and searching the internet for learning resources like these whenever you get stuck. Good luck on your ReactJS journey and have fun!