I have a list, when I click it I want a detail view, and it works the first time but when i click a new row in my list my detail component is not updating. I'm new to this. How to an update every time I click a object in my list. My detail component called "UpdateSupp" code:
import { useState, useEffect } from "react";
const UpdateSupp = ({ onAdd, _AssNr, _SuppName, _TurnOver12M }) => {
const [AssNr, setAssNr] = useState("");
const [SuppName, setSuppName] = useState("");
const [TurnOver12M, setTurnOver12M] = useState("");
useEffect(() => {
const RunAtChange = async () => {
setAssNr(_AssNr);
setSuppName(_SuppName);
setTurnOver12M(_TurnOver12M);
console.log(`_AssNr = ${_AssNr}`);
};
RunAtChange();
}, []);
const onSubmitUppSupp = (e) => {
e.preventDefault();
onAdd({ AssNr, SuppName, TurnOver12M });
};
return (
<form className="add-form" onSubmit={onSubmitUppSupp}>
<div className="form-control">
<h2>
<label>{SuppName}</label>
</h2>
</div>
<div className="wrapper-detail">
<div className="form-control">
<label>Leverantör ID</label>
<input type="text" value={AssNr} onChange={(e) => setAssNr(e.target.value)} />
</div>
<div className="form-control">
<label>Över 12M</label>
<input
id="set12M"
type="text"
value={TurnOver12M}
onChange={(e) => setTurnOver12M(e.target.value)}
/>
</div>
</div>
<input type="submit" value="Spara" className="btn btn-block" />
</form>
);
};
What am I doing wrong? Is there something else than useEffect to us that fires on every update?
You're explicitly telling useEffect() to not run on every component update with the empty dependency array , []).
Do not pass a dependency array at all to have the effect run on every update. However, that will also effectively always overwrite the state with the props.
It sounds like you just want to use the props as the initial state values:
const [AssNr, setAssNr] = useState(_AssNr);
const [SuppName, setSuppName] = useState(_SuppName);
const [TurnOver12M, setTurnOver12M] = useState(_TurnOver12M);
// No effects needed
However, these won't be updated if you change the props, of course. It's unlikely that you really want that, but if you wanted to overwrite, say, all of the state values when any of the props change, then you'd have an effect with all of the props as dependencies:
useEffect(() => {
// Reset all state when props change
setAssNr(_AssNr);
setSuppName(_SuppName);
setTurnOver12M(_TurnOver12M);
}, [_AssNr, _SuppName, _TurnOver12M]);
As an aside, you never use setSuppName, so perhaps you'll want to get rid of that state atom altogether and just use the prop.