i created a parent component that gathers a bunch of child components: Expenses - Parent, ExpenseItem - child.

i defined the first value of ExpenseItem by hard coding inside of Expenses i entered the dynamic value to the ExpenseItem component element and then used "props" parameter to get the data from ExpenseItem to Expenses.

function Expenses() {

    const Data = [{
    title: `מסרק`,
    date: Date(),
    amount: 2.95,
  },
]

  return (
    <div>
      <ExpenseItem 
        title={Data[0].title}
        date={Data[0].date}
        amount={Data[0].amount}
      />
      
    </div>
  );
}

now, i want to update the values through a button "edit" in ExpenseItem Component. when i do update values through useState and console log them i see the updated values, but, the component doesnt re-renders so i see the prev value on the screen. though if i try to hard code the value it does re-renders and changes the value on the screen.

function ExpenseItem(props) {
  const [title, setTitle] = useState(props.title);
  const [date, setDate] = useState(props.date);
  const [amount, setAmount] = useState(props.amount);

  const clickHandle = () => {
    console.log(title);
    setTitle("חתול")

    console.log(Date());
    setDate(date)

    console.log(amount);
    setAmount("222")
  }


  return (
    <div className="ExpenseItem">
      <div className="ExpenseItem_EditFunctions">
        <p className="ExpenseItemDate">{props.date}</p>
        <div className="ExpenseItem_EditFunctions_Icons">
          <span className="material-icons delete">delete</span>
          <span className="material-icons edit" onClick={clickHandle}>
            edit
          </span>
        </div>
        <div className="ExpenseItem_MainContent">
          <h3 className="ExpenseItemTitle">{props.title}</h3>
          <p className="ExpenseItemAmount">₪{props.amount}</p>
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

It's because you are using props to display values you need to display state values instead of them.You need to replace all the prop values with corresponding state values to make this code work properly. Just replace {props.date} to {date} {props.title} to {title} and {props.amount} to {amount}