const Section = ({ text, changeFn }) => { return( <> <Content text={text} changeFn={changeFn}/> <Content text={text} changeFn={changeFn}/> <Content text={text} changeFn={changeFn}/> </> ) } const Content = ({ changeFn, text }) => { const [ textCont, setText ] =useState('text') return( <> <div>{textCont}</div> <button onClick={changeFn}>Edit</button> </> ) } const Form = ({ changeFn, setContent }) => { let inputRef = useRef() const applyChangefn = () => { setContent(inputRef.current.value) changeFn() } return( <> <input ref={inputRef}/> <button onClick={applyChangefn}>Save</button> </> ) }

Quiero crear un componente que exista como ejemplo con su propio estado de uso en el componente Contenido. Luego quiero enviarlo multiplicado por 3 veces al componente Sección. La primera pregunta es cómo enviar accesorios entre componentes hermanos. La segunda pregunta es cómo hacer 3 componentes iguales que tengan su propio estado de uso. Me refiero a 3 mismos componentes con estado de uso independiente.