Reactjs Child Component - reactjs

Question

I have a doubt with hierarchy in react.
My Main.js has 2 articles as following:
<article className="angel__flow">
{steps.map((step, index) => {
if (procedures[step]){
return (
<Flow
key={`${index}-${step}`}
index={index}
opened={currentStepIndex === index}
procedure={procedures[step]}
/>
);
} else return "";
})}
</article>
<article className="angel__steps">
{steps.map((step, index) => {
if (procedures[step]){
return (
<Steps
key={`${index}-${step}`}
index={index}
opened={currentStepIndex === index}
procedure={procedures[step]}
commandSender={sendViewerMessage}
/>
);
} else return "";
})}
</article>
Each article has a map, and for each item, it calls a function. The first one calls the Flow function and the second one calls the Steps function.
My Flow function is the following:
function Flow({ index, opened, procedure }) {
const { t, i18n } = useTranslation();
const [show, setShow] = useState(false);
useEffect(()=>{
setShow(opened)
},[opened])
return (
<a onClick={() => setShow(!show)} className={`angel__flow__button ${show ? "active" : ""}`}>
{t(procedure.title[i18n.language])}
<span class="angel__flow__button__number">{index+1}</span>
</a>
);
}
And my Steps function is the following:
function Steps({ index, opened, procedure, commandSender }) {
const { i18n } = useTranslation();
const [selected, setSelected] = useState([]);
function clickHandler(command, index, key, procedure) {
if (!isSelected(key)) commandSender(`${command}|${index}|${procedure.id}|${key}`)
if (isSelected(key)) setSelected(selected.filter(s => s !== key))
else setSelected([...selected, (key)])
}
function isSelected(key) {
return selected.includes(key);
}
return (
<>
{ opened && (
<>
{procedure.guide &&
map(procedure.guide, (value, key) => (
<a
key={key}
className={`angel__steps__button blue ${isSelected(key) ? "active" : ""}`}
onClick={() => clickHandler('GUIDE', index, key, procedure)}
>
{value[i18n.language]}
</a>
))
}
<hr />
{procedure.error &&
map(procedure.error, (value, key) => (
<a
key={key}
className={`angel__steps__button red ${isSelected(key) ? "active" : ""}`}
onClick={() => clickHandler('ERROR', index, key, procedure)}
>
{value[i18n.language]}
</a>
))
}
{procedure.success &&
map(procedure.success, (value, key) => (
<a
key={key}
className={`angel__steps__button green ${isSelected(key) ? "active" : ""}`}
onClick={() => clickHandler('SUCCESS', index, key, procedure)}
>
{value[i18n.language]}
</a>
))
}
</>
)}
</>
);
}
What I have to do is: When I click an A tag in the Flow function, it has to open the Steps of that tag.
So, I dont know what I have to do. Maybe send back to my Main function a flag that says that I clicked that tag, so, my Steps function will have it's tag opened.
Can you guys help me with this?

Answer 1

pass in a click handler to Flow within Main.js:
<Flow setCurrentStepHandler={(i) => this.setState({currentStepIndex: this.state.currentStepIndex === i ? null : i})}/>
And in Flow:
<a onClick={() => {
setShow(!show)
setCurrentStepHandler(index)
}}
That way when currentStepIndex is updated, it will pass as a prop to <Steps .../>