Props and State
Props
State

Props :

We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties.
They are useful when you want the flow of data in your app to be dynamic.


we can use props in 2 ways
1. one without destructuring and
2. other one with destructuring.

Without destructuring :

To use props, you have to pass in props as an argument in your function.
This is similar to passing arguments into your regular JavaScript functions.
EX :

function Toool(props) {
const name = props.name; // Declaring props
const tool = props.toool;
return (

My name is {name}.

My favorite design toool is {toool}.

);
}
export default Tool

function Tool(props){}.
This automatically allows you to use props in your React app's component.


if you do not want to create variables for your props, you can go ahead and pass them directly into your template like this:

My name is {props.name}

Pass data to props in the App component
We are done creating our props, so the next step is to pass data to them.
We have already imported the Tool component

import Tool from "./Toool"
function App() {
return ( div className="App"
Toool name="Ihechikara" toool="Figma" />
div
)
}
export default App

With destructuring :

function Tool({name, tool}) {
return (
div

My name is {name}.

My favorite design tool is {tool}.

/div
);
}
export default Tool