How to Serve Different Content Based on User Data/Membership with Strapi and React
Tags: react, strapi, cms, tutorial
Published: 2021-11-24 17:38:13

Strapi has grown so large in a short period that it has become the most generally used headless CMS platform for developers and companies in the development of their products. With this stremendous trend, we'll learn how to generate content based on a user in this lesson.

## Goal:

In this article, we will look at how to connect the Strapi backend to our React frontend, save and fetch data from Strapi using Axios. We'll also go through how to create database collections and create relationships between them.

## Prerequisites

This tutorial will be a hands-on demonstration. If you'd like to follow along, be sure you have the following installed

- Node.js
- NPM
- React.js


## What is a Headless CMS

A headless CMS is a content management system (CMS) created from the ground up as a content repository that makes content accessible via a RESTful API or GraphQL API for display on any device, with an interface to manage content and a RESTful or GraphQL API to deliver content wherever you need it. A headless CMS, as a result of this strategy, is agnostic about how and where your content is presented. It has only one goal to store and provide structured material while also allowing content editors to collaborate on new content.


## What is Strapi

Strapi is an open-source headless CMS that allows developers to use their preferred tools and frameworks while allowing editors to manage and distribute their content through their application's admin panel. Strapi is a modular CMS built on a plugin architecture, with an extensible admin panel and API, and every component modifiable to fit any use case. Strapi also has an in-built user system for controlling what administrators and end-users have access to.


## Create a Strapi Project

Now that we have to know what Strapi is all about, let’s go ahead and create a Strapi project for our application. To get started, first create a dedicated directory of our project with the command below:

```bash
    mkdir Strapi-ReactApp && cd Strapi-ReactApp
```

We are now in the `*Strapi-ReactApp*` director, go ahead and create our Strapi backend with the command below:

```bash
     npx create-strapi-app strapi-server --quickstart
```

The command will create a `strapi``-server` directory in the `*Strapi-ReactApp*` directory we created, with the files and configurations required for our backend.

If the command above runs successfully, you should get an output like the one on the screenshot below  on your terminal, which are the details of our project.

![strapi-installation](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1637240142100_Screenshot+from+2021-11-18+13-55-09.png)


Open your favourite browser, and go to `http://localhost:1337/admin` to open the admin page for our project. Fill in your details in the form Strapi provides and press the **LET’S START** button.

![strapi-registration](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635921395357_Registration.png)


Then you’ll be redirected to the Strapi admin Dashboard, from here we will create our content-type, define our content fields, and add records to our content collections. 

![Strapi-first-view](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635921618733_Screenshot+from+2021-10-30+08-03-26.png)



## Creating Our Content-Types Builder

At this point, our Strapi application is set. Now let’s proceed to create some collection types. Click on **Content-Types Builder** at the left-hand side of our admin dashboard. We’ll create two contents types, the **Users_detail**, **Business**, and **Comment** content-types. The Users_details content-type will have a one-to-many relationship with the **Business** content-type, while the  **Business** will also have a one-to-many relationship with the **Comment** content-type.

**Creating our Business Content-Type**

We want our users to register their business on our application. So we will create **Business** content-type to save the details of the user’s business. First, create the **Business** content-type by clicking the **Create new collection type** **button**  under **collection types**.

![creating-collection-types](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635951365031_Screenshot+from+2021-11-03+15-55-49.png)


Then, enter `Business` as the content-type display name and click the **Continue** button to proceed. A modal will pop up for you to choose the fields you want in the collection. 


![adding-fields](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635946198448_Screenshot+from+2021-11-03+14-29-39.png)


For our **Business** content-type, we will use the **Text** field type to save the business **name**, **slogan**, **city**, **phone**, **state**, **status**, and **postal_code,** then we will use the Boolean field type for the **isApproved** field.
Select **Text** from the field collection types, the name field will be called name, choose the short text type, and click the add **another field button**.
We will also create other fields for the **slogan**, **city, phone**, **state**, and **postal_code** with the same process. Select the Boolean field type and name it **isApproved**. When we are done creating our field types, we will click the **Finish** button. 
You will see all our created fields nicely displayed on the screen.

![strapi-field-view](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636306149402_Screenshot+from+2021-11-07+18-28-40.png)


Finally, click on the **save** button to save our content-type.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635954887118_Screenshot+from+2021-11-03+16-54-38.png)


**Creating our Users _detail Content-Type**

We want all users of our application to be registered with the application.  Let’s get started. First, create the **User_detail** content-type by clicking the **Create new collection type button**  under **collection types**.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1637240948459_Screenshot+from+2021-11-18+14-08-49.png)


Then, enter the content-type display name and click the **Continue** button to proceed. A modal will pop up for you to choose the fields you want in the collection. 


![colloection-type](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635946198448_Screenshot+from+2021-11-03+14-29-39.png)


For our Users_detail content-type, we are using the fields below:

- Text
- Email
- Password
- Relation

We will use the text field for the user's **full name** and **role,** the **email** field we will use to save the user's email, the password field for the user's password, and the relation to connecting the **User****s****_detail's** content-type with the **Business** content-type.

Now, select **Text** from the field collection types, name it `fullname`, choose the short text type since we will save the user’s full name in this field. Click on the **add another field** button, and repeat the step for the **role** field, but this time, the field name should be called `role`. The **role** field will enable differentiate our normal users from the admin users.

Next, select **Email** from the field collection type for our user’s email address, the field should be named `email`, and it should be of short text type. 
We create another field for our user’s password, we name it a `password`, and it will be of short text type.

Finally, we create our relation field to create a relationship with the Business content-type. Select the relation field type, name it `businesses` and make it have a One-to-Many relationship with the **Business** content-type by selecting Business content-type in the select field at the right hand of the page.


![strapi-relation](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635949237797_Screenshot+from+2021-11-03+15-20-27.png)


 
Then click on finish, and save the fields and the event type. 

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635955240998_Screenshot+from+2021-11-03+17-00-32.png)


**Creating our Comment** **Content-Type**
We also need to save the user's comment on the businesses registered in our application. We need to create a Comment content-type by clicking the **Create new collection type** **button** under **collection types** as we did in the previous sections.
 

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635955793664_Screenshot+from+2021-11-03+17-09-40.png)


Then, name it `Comment`, and click the **Continue** button to proceed. We will be using the Text and Number field types in our comment content-type. The Text type for the comment ****and **user** field, then the **Number** type for the `businessId`.


![strapi-setup](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635956295192_Screenshot+from+2021-11-03+17-18-03.png)


Finally, click on finish, and save the fields and the event type. 

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1635956864041_Screenshot+from+2021-11-03+17-27-32.png)



## Create our react app

We have successfully created our strapi backend, so let’s move on to our React frontend. Before that, we need to enable CRUD in our Strapi Strapi instance by going to **Settings** → under USERS & PERMISSIONS PLUGIN**, Role → Public →** Under Permission, **Application.** We will click the **select all** input box for each of the collection types to provide our frontend end access to do CRUD operations on our backend.

Next, we need to move out the folder with the command below:

```
    cd ..
```
Then create our react application with the command below:

```bash
    npx create-react-app strapi-client
```

Wait for some minutes for the installation to finish depending on the speed of your network connection.
When the installation is complete, run the command below to confirm it.
 
```
    create-react-app --version
```

If everything went well during the installation, you should see the create-react-app version printed out on the console like in the screenshot below.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636065438596_Screenshot+from+2021-11-04+23-37-02.png)


Now change the directory to the `strapi-client` , and delete the boilerplate code/files from the codebase
 
```
    cd strapi-client
```

Next, we need to install the [Axios](https://www.npmjs.com/package/axios) module which will be used to make API calls to the strapi backend, and react-router version 5.3.0 with the command below:

```bash
    npm install axios react-router-dom@5.3.0
```

Then, remove some start the react application with the command below:

```bash
    npm run start
```

Open your favorite browser and navigate to `local``h``ost:3000` to view the application.


## Create a User Component

We need to create a **User** component to handle our user’s registration and authentication. To get started, on the `strapi-client/src` folder, create a `components` directory. We will separate our authentication components from other components by creating an `authentication` folder in the `components` directory. Then, create `Signup.jsx`  file in the `authentication` folder.
This component will be in charge of our users' registrations. Open the **Signup.jsx** file and paste the following code:

```
    import axios from "axios";
    import { useState } from "react";
    import { useHistory } from "react-router";
    function SignUp(props) {
      return (
        <section>
          <div>
            <form action="" onSubmit={(e) => handleSubmit(e)}>
              <input
                type="text"
                placeholder="Fullname"
                onChange={(e) => setName(e.target.value)}
                name="Name"
              />
              <input
                type="text"
                placeholder="Email"
                onChange={(e) => setEmail(e.target.value)}
                name="Email"
              />
              <input
                type="password"
                placeholder="Password"
                onChange={(e) => setPassword(e.target.value)}
                name="Password"
              />
              <button type="submit">Login</button>
            </form>
          </div>
        </section>
      );
    }
    export default SignUp;
```

In our code, we’ll import `Axios`, to enable sending API requests to the backend. Then we imported useState and `useH``i``story`. The **useState** hook will enable us to handle our application states, while **useHistory** will enable us to redirect our users on successful login to our application.

Next, in our functional component, we returned our registration form, created our **handleSubmit** handler which we will be creating later in this section. Then we created our **onChange** handlers on all the input fields to set and reset the input value states, which we will be creating shortly.

Now let’s create our states, and state function handlers. In the `Signup.jsx` file, before the return keyword, add the code below:

```
      const [name, setName] = useState("");
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const history = useHistory()
      const { setActiveUser, setLoggedIn } = props;
      
      const handleSubmit = async (e) => {
        e.preventDefault();
        const reqBody = {
          fullname: name,
          email,
          password,
        };
        const res = await axios.post(
          "http://localhost:1337/users-details",
          reqBody
        );
        if (res.statusText === "OK") {
          setActiveUser(res.data);
          setLoggedIn(true);
          history.push('/')
        }
      };
```

Here, we created the **email,** **password, history** states hooks. Then we created the **handleSubmit.** When a user submits the registration form, we send a Post request to our Strapi backend to save the user’s records and return the user to the application **Home** Component which we are yet to create on successful registration.
Finally, we add the registered user to our `activeUser` state and reset the `isLoggedIn` state which we will be creating on our **App component** later in the section to true, to update our components that a user is logged in.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636199911412_Screenshot+from+2021-11-06+12-55-50.png)


## Create Authenticate User Component

At this point, we've created our user Component to manage our users' registration. Let's move on to authenticate users in our application. Create a `Signin.jsx` file in the authentication folder we created, and add the following code:

```
    import axios from "axios";
    import { useState } from "react";
    import { useHistory } from "react-router";
    import { Link } from "react-router-dom";
    function SignIn(props) {
      const [email, setEmail] = useState();
      const [password, setPassword] = useState();
      const [errorMessage, setErrorMessage] = useState("");
      const history = useHistory();
      const { setActiveUser, setLoggedIn } = props;
      const handleSubmit = async (e) => {
        e.preventDefault();
        const res = await axios.get(
          `http://localhost:1337/users-details?email=${email}&password=${password}`
        );
        if (res.data.length === 0) {
          setErrorMessage("Incorrect Email or password");
        } else {
          setActiveUser(res.data);
          setLoggedIn(true);
          history.push("/");
        }
      };
      return (
        <section>
          <div>
            <form action="" onSubmit={(e) => handleSubmit(e)}>
              <input
                type="text"
                placeholder="Email"
                onChange={(e) => setEmail(e.target.value)}
              />
              <input
                type="password"
                placeholder="Password"
                onChange={(e) => setPassword(e.target.value)}
              />
              {errorMessage && <p>{errorMessage},<Link to="/signup"> Signup </Link>instead</p>}
              <button type="submit">Login</button>
            </form>
          </div>
        </section>
      );
    }
    export default SignIn;
```

If you look closely, you will notice that our **Signin** component is similar to our **Signup** component, except for a few minor differences that I will highlight. To begin, we imported the **Link** component from the **react-router-dom** package to create a link to our **Signup** component. Then we added an **errorMessage** state hook, which shows an error message if a user login fails.

Next, we created a `handleSubmit` function to handle form submissions, but this time we're sending a Get request and passing the user's email and password as query parameters. If the user's email and password match any record in our Strapi User_details content-type collection, we add the user's data to the active user's state and reset the **isLoggedIn** state to true.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636200004836_Screenshot+from+2021-11-06+12-59-51.png)


## Create Business Component

We’ll create a **Business** component to manage our user’s business. For the separation of concern, we will create a `Business` folder in our **components** folder for all our business-related components. Then we’ll create three components `Business.jsx` `BusinessList.jsx`, and `BusinessDetails.jx` file in the Business folder.

In our **Business.jsx** files, add the code below:

```
    import BusinessList from "./BusinessList";
    import { useState } from "react";
    import Modal from "../Modal";
    function Business(props) {
      const { isLoggedIn, business } = props;
     const [showModal, setShowModal] = useState(false);
      return (
        <section className="container">
          <h4>Business Listings</h4>
          <div className={"form"}>
            {isLoggedIn && <button className={"btn-danger"} onClick={() => setShowModal(true)}>Add business</button>}
            <input type="text" name="" id="" />
            <button className={"btn-info"}>Search</button>
          </div>
          <div className={"row"}>
            {business.map((data) => (
              <BusinessList business={data} />
            ))}
          </div>
        </section>
      );
    }
    export default Business;
```

First, we’ll import our **BusinessList** Component where we will display all the businesses approved by the admin, **useState** to handle the display, and hide our modal. The next thing is to inherit the Business and is logged in the state from the **App** Component. We also import our **Modal** Component which we will be creating later and listen to **onClick** event to show and hide our modal when the **Add Business** button is clicked. 
Then, in our jsx elements, we created an **Add Business** button, which will available only when a user is logged in to our application.

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636200227231_Screenshot+from+2021-11-06+13-03-32.png)


Our **Add Business** button will display a modal, which will enable them to create a new business.  When a new business is created, **isAppr****o****ved** has to be set to true in our **Business** content type before the business can be displayed.
Users that are not logged in to our application can only view the business listing, but can not comment or create their own business.
Then, we loop through all available business listings with the **map** function and pass the details to our **BusinessList** Component.


![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636200134495_Screenshot+from+2021-11-06+13-01-56.png)


Next,  we will update our **BusinessList** Component with the code below:

```
    import { Link } from "react-router-dom";
    function BusinessList(props) {
      const { business } = props;
      return (
        <section>
          <div className={"row"}>
            <div className={"card"}>
              <div className={"col-md-12"}>
                <h4>
                  <Link to={`/business/${business.id}`}>{business.name}</Link>
                </h4>
              </div>
              <div className={"col-md-12"}>
                <p>{business.slogan}</p>
              </div>
              <div className={"handles"}>
                <button>City: {business.city}</button>
                <button>Call:{business.phone}</button>
              </div>
            </div>
          </div>
        </section>
      );
    }
    export default BusinessList;
```

We import the `Link` Component from **react-router-dom**, which we know allows linking our Components together. Then we also inherited the business state from our **Business** Component to have access to the business listings.
Now, for each of the businesses in our collection, we created a link to the **BusinessDetails** Component, passing the business id as **params** to the URL where the users can see more information about a business, and as well drop comments. Then, using the business object from the Business Component, we displayed the business details


![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636200227231_Screenshot+from+2021-11-06+13-03-32.png)


Next, we will update our **BusinessDetails** we import the `Link`, and `useParams` Hooks from **react-router-dom.** The **useParams** Hook will enable getting the business id from the URL params. Then we import **useState**, and **useEffect** hooks for state management. We get the business id from the URL parameters `const { id } = useParams();`, so for each business, we will access their details from theirs ids.
Update our `BusinessDetails` Component with the code below:

```
    import { Link, useParams } from "react-router-dom";
    import { useState, useEffect } from "react";
    import axios from "axios";
    function BusinessDetails(props) {
      const { id } = useParams();
      const [comment, setComment] = useState();
      const [comments, setComments] = useState();
      const { business, activeUser, isLoggedIn } = props;
      const businessDetail = business.filter((data) => data.id == id);
      return (
        <section className={"container"}>
          <div className={"details"}>
            <h4>{businessDetail[0]?.name}</h4>
            <div className={"location"}>
              <p>Call:{businessDetail[0]?.phone}</p>
              <p>City: {businessDetail[0]?.city}</p>
              <p>Street: {businessDetail[0]?.street}</p>
            </div>
          </div>
        </section>
      );
    }
    export default BusinessDetails;
```

Next, we create a `comment`, and a `comments` state, we will use the **comment** state to get the users to comment from the comment form, and the comments state will be we will use to save the user's comments on a particular business. 
In our comment **form**, we added an onSubmit event which will be triggered when the **handleSubmit** function which we will be creating shortly is called. We add an **onChange** event to the input to update our comment with the text in the input field.
Add the code below to our `BusinessDetails` Component, inside the `<section>` jsx element.

```
    <div className={"comments"}>
            {comments?.length > 0 ? (
              <div>
                {comments.map((comment) => (
                  <p>
                    <span>{comment.user}: </span>
                    {comment.comment}
                  </p>
                ))}
              </div>
            ) : (
              <p>No comments</p>
            )}
            <form action="" onSubmit={(e) => handleSumbit(e)}>
              <textarea
                name=""
                id=""
                cols="40"
                rows="3"
                onChange={(e) => setComment(e.target.value)}
              ></textarea>
              <button className={"btn-info"}>
                {isLoggedIn ? "Send" : <Link to="/signin">Send</Link>}
              </button>
            </form>
          </div>
```

Then, we used the **businessDetail** object to display the business details, we also loop through the **comments** object to display all the comments on this business which is empty for now. 
Now let’s fetch the user's comment from our Strapi business collection. Before the **return** key, add the code below to our **BusinessDatails** Component.

```
    useEffect(() => {
        async function fetchData() {
          const response = await axios.get(
            `http://localhost:1337/comments?businessId=${id}`
          );
          setComments(response.data);
        }
        fetchData();
      }, []);
```

We made a **Get** request to our Strapi backend using **Axios** inside our **useEffect** hook, passing the business id as a required parameter, to fetch all the comments for a business whose details are currently viewed by a user. Then we change the comments state to store the comments.

Next, we will create a **handlerSubmit** function to save our user's comments on a business. Then we send a POST request to our Strapi backend, creating a reqBody object, which contains the user **fullname**, **comment**, and id of the business they are commenting on.

Add the code below to our BusinessDetails Component after the **useEffect** hook.

```
    const handleSumbit = async (e) => {
        e.preventDefault();
        const reqBody = {
          user: activeUser[0].fullname,
          comment,
          businessId: id,
        };
        const resComment = await axios.post(
          "http://localhost:1337/comments",
          reqBody
        );
        setComments([...comments, resComment.data]);
    };
```

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636204987722_Screenshot+from+2021-11-06+14-22-52.png)


## Add Business Component

We need our users to add their business to our application. To get started, we will create our **Modal.jsx** Component. We will do that in our **Component** directory. First, we will import **useState** hook to get the user input from our form, we also need `Axios` to send requests to our Strapi backend. Then we add a close button to hide the modal when clicked, and we create a Business form with the following field:

- name
- slogan
- city
- state
- phone 
- street

We will add an **onChange** event to our forms fields to get the value when the fields are changed. We will also add an **onSubmit** handler function to our form, which will enable us to save the user’s Business records when the form is submitted.

```
    import { useState } from "react";
    import axios from "axios";
    const Modal = (props) => {
      return (
        <div className="modal">
          <div className="close" onClick={() => props.setShowModal(false)}>
            X
          </div>
          <hr />
          <form onSubmit={(e) => handleSubmit(e)}>
            <label className="control"> Name: </label>
            <input
              className="control"
              type="text"
              onChange={(e) => setName(e.target.value)}
            />
            <label className="control"> Slogan: </label>
            <input
              className="control"
              type="text"
              onChange={(e) => setSlogan(e.target.value)}
            />
            <label className="control"> Phone: </label>
            <input
              className="control"
              type="text"
              onChange={(e) => setPhone(e.target.value)}
            />
            <label className="control"> Street: </label>
            <input
              className="control"
              type="text"
              onChange={(e) => setStreet(e.target.value)}
            />
            <label className="control"> Postal Code: </label>
            <input
              className="control"
              type="text"
              onChange={(e) => setCode(e.target.value)}
            />
            <label className="control"> City: </label>
            <input
              type="text"
              className="control"
              onChange={(e) => setCity(e.target.value)}
            />
            <button className="control-1">Submit</button>
          </form>
        </div>
      );
    };
    export default Modal;
```

Next, we will create states for our form fields and our `handleSubmit` function.
In our `handleSubmit` function, we will create a **reqBody** object where we will save all the user's input values, and send a **Post** request to our Strapi backend to save the records.


```
     const [name, setName] = useState();
      const [slogan, setSlogan] = useState();
      const [phone, setPhone] = useState();
      const [city, setCity] = useState();
      const [street, setStreet] = useState();
      const [code, setCode] = useState();
      const handleSubmit = async (e) => {
        e.preventDefault();
        const reqBody = {
          name,
          slogan,
          phone,
          city,
          street,
          postal_code: code,
          isApproved: false,
        };
       await axios.post("http://localhost:1337/businesses", reqBody);
      };
```

![](https://paper-attachments.dropbox.com/s_E572C6B0F1CAB5FCFA608AF6E4D20882E2259C2699542159BEE208EE83DC490C_1636217484846_Screenshot+from+2021-11-06+17-51-09.png)



## Updating the App Component

Now back to our App Component, let’s now connect our other Components to our **App** Component. First, we need to import our modules and components into the **App** Component. Open the **App.js** and update it with the code below:

```
    import React, { useEffect, useState } from "react";
    import axios from "axios";
    import Header from "./components/Header";
    import Home from "./components/Home";
    import Business from "./components/Business/Business";
    import SignIn from "./components/Authentication/Signin";
    import SignUp from "./components/Authentication/Signup";
    import Profile from "./components/Profile";
    import BusinessDetails from "./components/Business/BusinessDetails";
    import { Switch, Route } from "react-router-dom";
```

The key things to point in our code are the **Switch** and **Router** components, which we import from the **react-router-dom** to handle our application’s routing.

```
    function App() {
      return (
        <div className="App">
           <Header isLoggedIn={isLoggedIn} setLoggedIn={setLoggedIn} setActiveUser={setActiveUser}/>
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/business" exact>
              <Business isLoggedIn={isLoggedIn} business={business} />
            </Route>
            <Route path="/business/:id">
              <BusinessDetails business={business} activeUser={activeUser} isLoggedIn={isLoggedIn}/>
            </Route>
            <Route path="/signin">
              <SignIn setActiveUser={setActiveUser} setLoggedIn={setLoggedIn} />
            </Route>
            <Route path="/signup">
              <SignUp setActiveUser={setActiveUser} setLoggedIn={setLoggedIn} />
            </Route>
            <Route path="/profile">
              <Profile business={business} activeUser={activeUser}/>
            </Route>
          </Switch>
        </div>
      );
    }
    export default App;
```

Next, we’ll set up six routes `/`, `/business` `/business/:id` , `/signin`, `/signup`, and `/profile`.  The `/` toute will render our Home, `/business` route will render the Business Component, the `/business/:id`  route will render the BusinessDetail Component, the  `/signin` route will render our Signin component, the  `/signup`  route will render our Signup Component.

The `Switch` component wraps the dynamic routes and the `Route` configures the specific routes and wraps the component the route will render. Then our
**Header** component will be rendered in all the Components which we have not created yet. Create a `Header.jsx` and `Home.jsx` component in our `component` directory. 

Add the code below to the `Header.jsx` component.

```
    import { Link } from "react-router-dom";
    function Header(props) {
      const { isLoggedIn, setLoggedIn, setActiveUser } = props;
      const handleLogout = () => {
        setLoggedIn((prev) => !prev);
        setActiveUser([]);
      };
      return (
        <header>
          <div className={"logo"}>
            <h4>Biza</h4>
          </div>
          <div className={"navbar"}>
            <ul>
              <li>
                <Link to="/"> Home </Link>
              </li>
              <li>
                <Link to="/business"> Business </Link>
              </li>
              {isLoggedIn ? (
                <>
                  <li onClick={handleLogout}>Logout</li>
                </>
              ) : (
                <>
                  <li>
                    <Link to="/signin"> Signin </Link>
                  </li>
                  <li>
                    <Link to="/signup"> Signup </Link>
                  </li>
                </>
              )}
            </ul>
          </div>
        </header>
      );
    }
    export default Header;
```

We import `Link` component from `react-router-dom`, destructure our `isLoggedIn`, `setLoggedIn`, `setActiveUser` from our props. We’ll use conditional rendering to display the **Logout** link only when a user is logged in our application, then display the Signup and Sign in links when they are not.

Next, we’ll create a handleLogout handler function to log our users out by changing the isLoggedIn state and removing the logged-in user from the ActiveUser state.

Add the code below to the `Home.jsx` component.

```
    function Home(){
        return(
          <section className={'homepage'}>
              <h4><span>Tell the World</span> about your Business</h4>
              <button>Get Started</button>
          </section>
        )
    }
    export default Home;
```

Next, we will create `isLoggedIn`, `activeUser`, and `business` state. Our **isLoggedIn** state will help us know if a user is logged in to our application, the **activeUser**  state will enable us save the details of the currently logged in user, and our **business** state will enable use save all the approved business from our **Business** content-type collection. Because when a user is logged into our application, we need to persist their data to get it accross all the components where they will be used. 
Add the code below to our **App.js** Component before the return keyword

```
    const [isLoggedIn, setLoggedIn] = useState(false);
      const [activeUser, setActiveUser] = useState();
      const [business, setBusiness] = useState([]);
      useEffect(() => {
        async function fetchData() {
          // You can await here
          const response = await axios.get(`http://localhost:1337/businesses?isApproved=${true}`);
          setBusiness(response.data);
        }
        fetchData();
      }, []);
```
 
Now, let’s now modify our `Index.js` Component with the code below:
We will import `BrouserRouter` from **react-router-dom** module, the BrowserRouter component will initialize the routing system for our Components.

```
    import React from "react";
    import ReactDOM from "react-dom";
    import "./style.css";
    import App from "./App";
    import { BrowserRouter } from "react-router-dom";
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
```

Finally, create a `style.css` file in our **src** directory. Copy the styles from the Github [repository](https://github.com/icode247/Strapi-business-directory-app/blob/master/strapi-client/src/style.css) of this project and paste them into the **style.css** file.

## Test our application

We have completed our Strapi business Directory application. Let’s test our app. Go to `http://localhost:3000/`, feel to test all the routes.

- Signup page `/signup`
- Signin page `/signin`
- Business page `/business`
- Business Detail page `/business/id`
- Profile Page `/profile`


## Conclusion

Throughout this tutorial, you’ve learned how to serve different content based on user data/membership with Strapi and React.
We learned what Strapi is all about, and how it makes building APIs more efficient. We learned what a Headless CMS is all about, and how to set up a Strapi Project. We created a business directory application with Strapi and React.js.
Now you've known how efficient it is to build APIs with Strapi, how would use Strapi in your future project; perhaps you also want to learn more about [Strapi](https://strapi.io/).