Tengo dos componentes funcionales en un solo archivo js. quiero pasar estado de uno a otro
import React, { useState } from 'react'; export function StepTracker(props) { const [steps, setSteps] = useState(0); function increment() { setSteps(prevState => prevState + 1); } return ( <div> Today you've taken {steps} steps! <br /> <button onClick={increment}> I took another step </button> </div> ); } export function funcName(props){ return(<div>{state}</div<) }Puedes hacer esto por
export function StepTracker(props) { const [steps, setSteps] = useState(0); function increment() { setSteps(prevState => prevState + 1); } return ( <div> Today you've taken {steps} steps! <br /> <button onClick={increment}> I took another step </button> <FuncName steps={steps}/> </div> ); } export function FuncName(props){ return(<div>{state}</div<) }Puede lograr esto haciendo que el otro componente sea un componente secundario para el que tiene el estado.
import React, { useState } from 'react'; import './style.css'; export default function StepTracker() { const [steps, setSteps] = useState(0); function increment() { setSteps((prevState) => prevState + 1); } return ( <div> <FuncName state={steps} /> Today you've taken {steps} steps! <br /> <button onClick={increment}>I took another step</button> </div> ); } export function FuncName(props) { return <div>{props.state}</div>; }Otro método es utilizar el contexto. Aquí hay una guía sobre la documentación oficial de React.