quiero cambiar el
import './ExpenseItem.css'; import ExpenseDate from './ExpenseDate'; import Card from './Card'; function ExpenseItem(props){ let title = props.expenseTitle; function clickedFunc(){ title = "Update!"; } return( <Card className='expense-item'> <ExpenseDate expenseDate={props.expenseDate}></ExpenseDate> <div className='expense-item__description'> <h2>{title}</h2> <div className='expense-item__price'> ₹{props.expenseAmount} </div> </div> <button onClick={clickedFunc}>Click</button> </Card> ); } export default ExpenseItem;No es así como se manejan los datos con React.
El título debe almacenarse en una variable de estado (ver useState ).
Una vez que los datos se almacenan en una variable de estado, deberá configurarlos con setState . Cuando se llama a setState en React, el componente que contiene la variable de estado se vuelve a renderizar. Esto, a su vez, hará que su componente ExpenseItem se vuelva a procesar porque es un componente secundario de cualquier componente de nivel superior que le haya pasado props .
En su componente principal, debería ver algo como:
require { useState } from 'react'; const ParentComponent = (props) => { const [title, setTitle] = useState('Original Title'); ... ... ... return ( <div className="ParentComponent"> <ExpenseItem title={title} setTitle={setTitle} expenseAmount={expenseAmount} /> </div> ) } Luego, en su función clickedFunc() :
function clickedFunc() { props.setTitle("Update!"); }