I have following code.
I’m trying to store a value in my state and every time the user goes to the previous step he can see what he has selected and after that he can change and move on to the next step.
At the first step, everything works good. For example, the user selects the second text and proceeds to the next step, and when he returns to this step, he sees that the second text has already been selected…
The problem is with the second step, I write all the same, but it doesn’t work for the second step. When I am clicking on one of the div’s in second step nothing was happened. There is no error. Please help me to figure out what’s the problem
Here is my code.
App file
export default function App() {
const [selected, setSelected] = useState(1);
const [term, setTerm] = useState(1);
const [current, setCurrent] = useState(0);
const [data, setData] = useState({
firstName: "bob",
lastName: "Forest",
age: 47
});
const steps = [
{
title: "Package Choose",
content: (
<PackageChoose
setCurrent={setCurrent}
data={data}
setData={setData}
selected={selected}
setSelected={setSelected}
/>
),
id: 0
},
{
title: "Term",
content: (
<Term
setCurrent={setCurrent}
data={data}
selected={term}
setTerm={setTerm}
setData={setData}
/>
),
id: 1
},
{
title: "Last step",
content: <LastStep setCurrent={setCurrent} data={data} />,
id: 2
}
];
return (
<div className="App">
<div>{steps[current].content}</div>
</div>
);
}
first step package choose file
const PackageChoose = ({
setCurrent,
data,
setData,
setSelected,
selected
}) => {
return (
<div>
<div
onClick={() => {
setData({ ...data, packageType: "choice" });
}}
>
<SelectCard
id={1}
selected={selected}
onSelect={setSelected}
text="text 1"
/>
</div>
<div
onClick={() => {
setData({ ...data, packageType: "select" });
}}
>
<SelectCard
id={2}
selected={selected}
onSelect={setSelected}
text="text 2"
/>
</div>
<button onClick={() => setCurrent(1)}>Next</button>
</div>
);
};
second step Term file
const Term = ({ setCurrent, data, setData, term, setTerm }) => {
return (
<div>
<button onClick={() => setCurrent(0)}>Prev</button>
<div
onClick={() => {
setData({ ...data, termType: "30 day" });
}}
>
<SelectCard
id={1}
selected={term}
onSelect={setTerm}
text=" term text 1"
/>
</div>
<div
onClick={() => {
setData({ ...data, termType: "90 day" });
}}
>
<SelectCard
id={2}
selected={term}
onSelect={setTerm}
text="term text 2"
/>
</div>
<button onClick={() => setCurrent(2)}>Next</button>
</div>
);
};
SelectCard file , in this file I am using onSelect
const SelectCard = ({ id, selected, onSelect, text }) => {
const myClassName =
id === selected
? Styles.selectCardWrapperActives
: Styles.selectCardWrapper;
return (
<div className={classNames(myClassName)} onClick={() => onSelect(id)}>
<div> {text} </div>
</div>
);
};
Please help me to understand how can I fix this problem in my code.
Thanks.
Advertisement
Answer
I edited your code.
Your issue in props that you passed.
before: setTerm={setTerm} , now: setSelected={setTerm}