“Cómo pasar el estado de un componente a otro en componente funcional” Código de respuesta

Cómo pasar el estado de un componente a otro en componente funcional

//here i am creating a simple count state to show you the passing of the state:
import React, { useState } from "react";
import ComponentOne from "./components/ComponentOne/ComponentOne";

function App() {
	const [count, setCount] = useState(0);
    const increaseCount = () => {
    	const newCount = count + 1; 
      	setCount(newCount)
    };
  return (
  	<div>
    	<h2>Count: {count} </h2>
		<button onClick = {increaseCount}>Increase Count</button>
		
		//ComponentOne and passing state through props: 
		<ComponentOne count={count}></ComponentOne>
    </div> 
  )
}


//Above you can see that there is a state and count function that will increase 
//the current value of the count trough setCount methot. Now I will pass this 
//another component. 

Const ComponentOne = (porps) => {
	return (
      <div> 
        //rechieving the state of count through props.count cause we 
        // have given the props in this componenet: 
        <h3>the count state which is passed through props: {props.count} </h3>
      </div> 
    );
}


export default App;