freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403617c	Usa el método de ciclo de vida componentWillMount	6	301423	use-the-lifecycle-method-componentwillmount

--description--

Los componentes React tienen varios métodos especiales que proporcionan oportunidades para realizar acciones en puntos específicos en el ciclo de vida de un componente. Estos se llaman métodos de ciclo de vida, o interceptores (hooks) de ciclo de vida, y te permiten interceptar componentes en determinados momentos del tiempo. Esto puede ser antes de que se rendericen, antes de que se actualicen, antes de que reciban las props, antes de que se desmonten, etc. Aquí hay una lista de algunos de los métodos principales del ciclo de vida: componentWillMount() componentDidMount() shouldComponentUpdate() componentDidUpdate() componentWillUnmount(). Las siguientes lecciones cubrirán algunos de los casos de uso básicos para estos métodos del ciclo de vida.

Nota: El método de ciclo de vida componentWillMount se desaprobará en una versión futura de 16.X y se eliminará en la versión 17. (Fuente)

--instructions--

El método componentWillMount() es invocado antes del método render() cuando un componente está siendo montado en el DOM. Imprime algo en la consola dentro de componentWillMount() - puede que quieras tener la consola del navegador abierta para ver el resultado.

--hints--

MyComponent debe renderizar un elemento div.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
    return mockedComponent.find('div').length === 1;
  })()
);

console.log debe ser llamado en componentWillMount.

assert(
  (function () {
    const lifecycle = React.createElement(MyComponent)
      .type.prototype.componentWillMount.toString()
      .replace(/ /g, '');
    return lifecycle.includes('console.log(');
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<MyComponent />, document.getElementById('root'))

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // Change code below this line

    // Change code above this line
  }
  render() {
    return <div />
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    // Change code below this line
    console.log('Component is mounting...');
    // Change code above this line
  }
  render() {
    return <div />
  }
};