es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React: cómo elevar los props al componente padre?

Soy nuevo en React y estoy siguiendo un tutorial.

Estoy en una etapa en la que necesito elevar las props de los componentes secundarios a los componentes principales. Por el momento, tengo una función simple en el componente principal que solo muestra en la consola el valor obtenido del componente secundario.

Sin embargo, no funciona. Solo obtengo undefined en mi consola. No estoy seguro de qué hice mal, ya que parece ser lo mismo que el ejemplo en el tutorial.

¿Alguien puede ayudarme?

Aquí está mi componente principal:

import React from 'react';
import ExpensesFilter from '../ExpensesFilter/ExpensesFilter';
import ExpenseItem from "./ExpenseItem";
import Card from "../Ui/Card";
import './Expenses.css';

const Expense = (props) => {

  const yearChangeHandler = (chosenYear) => {
    console.log(chosenYear); // Retorna Undefined
  };

  return (
    <div>
      <expensesfilter onyearchange="{yearChangeHandler}/">
      <card classname="expenses">
        <expenseitem title="{props.items[0].title}" amount="{props.items[0].amount}" date="{props.items[0].date}"></expenseitem>
    </card></expensesfilter></div>
  );
};

export default Expense;

Y aquí está mi componente secundario:

import React, { useState } from 'react';

import './ExpensesFilter.css';

const ExpensesFilter = (props) => {
  const [selectedYear, setSelectedYear] = useState('');
  const yearChangeHandler = (event) => {
    const chosenYear = setSelectedYear(event.target.value);
    props.onYearChange(chosenYear); 
  };

  return (
    <div classname='expenses-filter'>
      <div classname='expenses-filter__control'>
        <label>Filter by year</label>
        <select onchange="{yearChangeHandler}">
          <option value='2022'>2022</option>
          <option value='2021'>2021</option>
          <option value='2020'>2020</option>
          <option value='2019'>2019</option>
        </select>
      </div>
    </div>
  );
};

export default ExpensesFilter;

Mi objetivo es mostrar en la consola el año seleccionado en el componente principal. Cualquier ayuda es apreciada. ¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que hay un pequeño problema en el componente secundario donde estás estableciendo el estado y pasándolo al controlador props.onYearChange.

    En lugar de:

    const yearChangeHandler = (event) => {
      const chosenYear = setSelectedYear(event.target.value);
      props.onYearChange(chosenYear); 
    };
    

    Deberías establecer el estado y luego pasar el valor directamente:

    const yearChangeHandler = (event) => {
      const chosenYear = event.target.value;
      setSelectedYear(chosenYear);
      props.onYearChange(chosenYear); 
    };
    

    Esto debería pasar correctamente el año seleccionado del componente hijo al componente padre.

Comments are closed.