One of the most important - if not the most important - things in React is the so called state. This state enables us to react (hence the name) on changes in the user interface, or events triggered by asynchronous calls etc.

Let's head back to the small Profile example we used in the Props chapter. We are going to add several projects to the person-object:

const person = {
    id: 1,
    firstname: "John",
    lastname: "Doe",
    job: "Developer",
    projects: [
        { id: 1, name: "React Frontend Development" },
        { id: 2, name: "UX / UI Design" },
        { id: 1, name: "HR Program" },
    ]
}

We add a button to the Profile component, which when clicked is going to display the projects the person worked on.

Code

• Class Component
• Function Component