Before diving into props vs state, it's best to first understand what a component is. A component is a function that takes props as an argument and returns JSX. A component can be written in a few different ways. Here’s one of the ways:

function App() {
return (
<div className="App">
<PokemonPage />
</div>
);
}

Now that we have an understanding of what a component is, we can take a dive into understanding what props and states are in React.

What are props in React?

Props are arguments passed into React components. Props can hold any kind of data (strings, numbers, booleans, objects, functions). The primary purposes of props in React are:

1. Pass data down to a child component.
2. Trigger state changes

Here’s an example of how to send data to other components using props. In this example, the parent component is sending data down to its child component.

function PokemonCollection() { const pokemonCards = pokemon.map((poke)=> (
<PokemonCard
key={poke.name}
poke={poke}
/>return (
<div>{pokemonCards}<div/>
}

In order to gain access to the data inside the child component, one must follow the steps below:

1. Pass in the prop as an argument
2. Optional: destructure the prop. Destructuring is essentially unpacking the values from the prop. This helps to clean up your code.

Here’s an example of what a prop looks like inside the child component.

function PokemonCard({poke}) { //destructuring a prop
const {name, hp, sprites, id } = pokereturn()
}

What is State in React?

State is an object that holds some information that changes over the lifetime of the component. When the state object changes, the component re-renders. One key rule about state is that it cannot be updated directly. We must use a setter function to update the state. Steps to set up a state:

1. Import the state to the component
2. Assign a variable and setter function to the state.
3. Issue an initial value on the state
4. Set up a function that can trigger the change in the state. This function can be either invoked inside the component or passed down to a child component as a prop and invoked from there. It is often attached to a JSX element that can trigger a change in the state based on its behavior.

Here’s how an example:

import React, { useState } from "react";//showFront is the variable, setShowFront is the setter function.
const [showFront, setShowFront] = useState(true)//attach this to a JSX element that can change the state.
const handleChange = () => {
setShowFront((showFront) => showFront = !showFront)
}return (<div onClick={handleChange}
<div className="image">
<img src= {showFront ? front : back} alt={name} />
</div>
<div)

What are the differences between props and state?

While both of them hold information that influences the output of a component, they are different in their functionality. The key differences are:

1. Props get passed to other components whereas the state is managed within the component.
2. Props are immutable, while state is mutable

Work Cited

[

Components and Props - React

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page…

reactwithhooks.netlify.app

](https://reactwithhooks.netlify.app/docs/components-and-props.html)

[

State and Lifecycle - React

This page introduces the concept of state and lifecycle in a React component. You can find a detailed component API…

reactwithhooks.netlify.app

](https://reactwithhooks.netlify.app/docs/state-and-lifecycle.html)