--- id: 5a24c314108439a4d403617b title: Pasa una función callback como "props" challengeType: 6 forumTopicId: 301400 dashedName: pass-a-callback-as-props --- # --description-- Puedes pasar `state` como "props" a los componentes hijos, pero no estás limitado a pasar datos. También puedes pasar funciones manejadoras o cualquier método que se defina en un componente React a un componente hijo. Así es como tú permites que los componentes hijos interactúen con sus componentes padres. Pasas métodos a un hijo igual que un "prop" normal. Se le asigna un nombre y tienes acceso a ese nombre de método en `this.props` en el componente hijo. # --instructions-- Hay tres componentes descritos en el editor de código. El componente `MyApp` es el padre que renderizará los componentes hijos `GetInput` y `RenderInput`. Añade el componente `GetInput` al método de renderizar en `MyApp`, luego pásale un "prop" llamado `input` asignado a `inputValue` desde el estado `state` de `MyApp`. También crea un "prop" llamado `handleChange` y pasa el controlador de entrada `handleChange` a este. A continuación, añade `RenderInput` al método de renderizar en `MyApp`, luego crea un "prop" llamado `input` y pasa el `inputValue` desde el estado `state` a este. Una vez que hayas terminado podrás escribir en el campo `input` en el componente `GetInput`, que luego llama al método manejador en su padre a través de "props". Esto actualiza la entrada en el `state` del padre, que se pasa como "props" a ambos hijos. Observa cómo fluyen los datos entre los componentes y cómo la única fuente de verdad sigue siendo el `state` del componente padre. Es cierto que este ejemplo es un poco inventado, pero debe servir para ilustrar cómo los datos y las funciones callback pueden ser pasados entre componentes React. # --hints-- El componente `MyApp` debe renderizarse. ```js assert( (function () { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })() ); ``` El componente `GetInput` debe renderizarse. ```js assert( (function () { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })() ); ``` El componente `RenderInput` debe renderizarse. ```js assert( (function () { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })() ); ``` El componente `GetInput` debe recibir la propiedad de estado `inputValue` de `MyApp` como "props" y contener un elemento `input` que modifica el estado de `MyApp`. ```js async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({ inputValue: '' }); return waitForIt(() => mockedComponent.state()); }; const state_2 = () => { mockedComponent .find('input') .simulate('change', { target: { value: 'TestInput' } }); return waitForIt(() => mockedComponent.state()); }; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '' && updated_2.inputValue === 'TestInput'); }; ``` El componente `RenderInput` debe recibir la propiedad de estado `inputValue` de `MyApp` como "props". ```js async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({ inputValue: 'TestName' }); return waitForIt(() => mockedComponent); }; const updated_1 = await state_1(); assert(updated_1.find('p').text().includes('TestName')); }; ``` # --seed-- ## --after-user-code-- ```jsx ReactDOM.render(, document.getElementById('root')) ``` ## --seed-contents-- ```jsx class MyApp extends React.Component { constructor(props) { super(props); this.state = { inputValue: '' } this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ inputValue: event.target.value }); } render() { return (
{ /* Change code below this line */ } { /* Change code above this line */ }
); } }; class GetInput extends React.Component { constructor(props) { super(props); } render() { return (

Get Input:

); } }; class RenderInput extends React.Component { constructor(props) { super(props); } render() { return (

Input Render:

{this.props.input}

); } }; ``` # --solutions-- ```jsx class MyApp extends React.Component { constructor(props) { super(props); this.state = { inputValue: '' } this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ inputValue: event.target.value }); } render() { return (
); } }; class GetInput extends React.Component { constructor(props) { super(props); } render() { return (

Get Input:

); } }; class RenderInput extends React.Component { constructor(props) { super(props); } render() { return (

Input Render:

{this.props.input}

); } }; ```