1

tengo un conflicto que no sé como extraer el hooks State de un componente, no sé si se pueda, lo que quiero es traer el dato del componente "contador" (en un archivo diferente) a otro componente mayor para posteriormente realizar operaciones con ese dato extraido.

No sé si estoy haciendo una mala practica de react y hay una mejor manera de hacerlo.

En este caso quiero extraer el State de cantidad y pasar ese valor al componente "padre"

// componente mayor o padre //

const Mycomponent= () => {

  return (
    <React.Fragment>
      <Form>
        <Form.Group>
          <Row>
            <Col md="1">
              <Form.Label>Filtro:</Form.Label>
            </Col>
            <Col className="text-center" md="2">
              <Form.Control as="select">
                  <option > </option>
              </Form.Control>
            </Col>
          </Row>
        </Form.Group>
      </Form>
      <Contador /> // componente contador
    </React.Fragment>
  );
};



// componente contador.js //

 
const contador = () => {
  const [cantidad, setCantidad] = React.useState(1);

  const sumar = () => {
    setCantidad((cantidad) => cantidad + 1);
  };
  const restar = () => {
    setCantidad((cantidad) => cantidad - 1);
  };

  return (
    <React.Fragment>
      <button onClick={restar}>-</button>
      <input
        className="text-center"
        type="number"
        value={cantidad}
      />

      <button onClick={sumar}>+</button>
    </React.Fragment>
  );
};

1
  • Tienes dos posibles caminos para manejar eso, la primera es subir el state al componente padre y pasarlo por parámetro, o lo que yo te recomendaría es utilizar un manejador de estados globales, como lo es redux. Te comparto la siguiente lectura: medium.com/react-redux/… Commented el 19 ago. 2020 a las 16:25

2 respuestas 2

1

Hay que tener en cuenta como funciona React , los hijos reciben datos del componente padre mediante sus props , porque planteas en tu pregunta de como pasar datos del hijo al padre y aunque suene igual no es lo mismo como dicen las respuestas anteriores , del Padre al hijo mediante props ten siempre eso en cuenta,otra cosa piensa en React trata de separar tus componentes lo mas posible en el componente App tienes para hacer otro componente stateless con el Filtro e importarlo al App y en App hacer un componente statefull con tu estado , y pasar el estado de allí mediante las props a esos 2 componentes hijos el Contador y Filtro, cabe destacar y ten en cuenta que aunque trabajes con Hooks es una buena practica separar la lógica de la interfaces y hacer componentes que manejen solo la lógica y otros encargados solo de renderizar en pantalla te dejo una refactorizacion de tu código hecho con react-bootstrap.

Componente Padre App.js

import React, { useState } from 'react';
import Contador from './Contador'
import Filtro from './Filtro'


function App() {
    const [cantidad, setCantidad] = useState(1);

    const sumar = () => {
        setCantidad(() => cantidad + 1)
    };
    const restar = () => {
        setCantidad(() => cantidad - 1)
    };
    return (
        <React.Fragment >
            <Filtro cantidad={cantidad} />
            <Contador
                sumar={sumar}
                restar={restar}
                cantidad={cantidad}
            />
        </React.Fragment>
    );
};

export default App;

Componente Contador.js:

import React  from 'react'
function Contador ({sumar, restar,cantidad}) {

    return (
        <React.Fragment>
            <button onClick={restar}>-</button>
            <input
                className="text-center"
                type="number"
                value={cantidad}
            />
            <button onClick={sumar}>+</button>
        </React.Fragment>
    )
}

export default Contador

puedes pasar las props mediante destructuring para evitar escribir props.sumar y solo usar sumar

Componente Filtro.js

import React from 'react'
import { Form, FormControl, FormGroup, FormLabel, Col, Row } from 'react-bootstrap'

const Filtro = ({ cantidad }) => {
    return (
        <Form >
            <FormGroup >
                <Row >
                    <Col md="1" >
                        <FormLabel >Filtro:{cantidad}</FormLabel>
                    </Col>
                    <Col className="text-center"
                        md="2" >
                        <FormControl as="select" >
                            <option > </option>
                        </FormControl>
                    </Col>
                </Row>
            </FormGroup>
        </Form>
    );
};

export default Filtro;

Espero que esto te ayude a solucionar tus dudas te dejo un enlace de buenas practicas en React 2020 https://enbonnet.me/article/52/10-buenas-practicas-que-debes-seguir-con-reactjs-en-2020

1

Podrías pasar el valor que necesitas desde el hijo hacia el padre mediante una función que envías desde el padre hacia el hijo. Un poco engorroso, pero el siguiente código te lo aclarará.

Teniendo como padre este componente, declaras la constante y al momento de llamar a tu componente hijo, le pasas una función que se encargue de setear el valor de flag o contador en tu caso

import React, { useState } from "react";
import "./styles.css";

import Child from './Child'

export default function App() {
  const [flag, setFlag] = useState(0)

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Flag: {flag}</h2>

      <Child contador={value => setFlag(value)} />
    </div>
  );
}

Después simplemente en tu componente hijo, envías el parámetro de vuelta hacia la función en cuestión con el valor que deseas

import React from "react";

export default function Child(props) {
  return (
    <React.Fragment>
      <h1>Child!</h1>

      <button type="button" onClick={() => props.contador(1)}>Clickeame</button>
    </React.Fragment>
  );
}

Acá te dejo el ejemplo práctico.

Coméntanos si es lo que necesitas

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.