Reusable container component with state and dynamic child component - reactjs

Question

I am trying to have a reusable component that can instantiate a dynamic component:
function EditableElement({endpoint, data, ElementFormClass}) {
const [edit, setEdit] = useState(false);
const [formData, setFormData] = useState(data);
const [deleted, setDeleted] = useState(false);
if (deleted) return (<p>X_X</p>);
if (edit) return ElementFormClass(
endpoint,
data,
setFormData,
pk => {
setDeleted(true);
},
e => setEdit(false)
)
return (
<p onClick={e => setEdit(true)}>{formData.name}</p>
)
}
function ElementFormDisplayOne({endpoint, data, cancel, updateData, deleteData}) {
const [formData, setFormData] = useState(data);
// const [deleted, setDeleted] = useState(false);
// if (deleted) return (<p style={{color: 'red'}}>DELETED</p>);
return (
<form onSubmit={e => {
e.preventDefault();
e.stopPropagation();
updateData(formData);
cancel();
}}>
<label htmlFor={formData.pk}>{formData.name}</label>
<input type="text" id={formData.pk} value={formData.name}
onChange={e => setFormData({...formData, name: e.target.value})}/>
<button type="button" onClick={cancel}>cancel</button>
<button type="submit">ok</button>
<button type="button" onClick={e => deleteData(formData.pk)}>delete</button>
</form>
)
}
It's used like this:
<div>
<h3>Gallery Form ONE</h3>
{data.map(el => <EditableElement endpoint={'update'} key={el.pk} data={el}
ElementFormClass={ElementFormDisplayOne}/>)}
</div>
<div>
<h3>Gallery Form TWO</h3>
{data2.map(el => <EditableElement endpoint={'update'} key={el.pk} data={el}
ElementFormClass={ElementFormDisplayTwo}/>)}
</div>
But it throws
Error: Rendered more hooks than during the previous render.
Is what I want possible in ReactJs?
Note: I'm not using Redux and don't intend to
Codesandbox example

Answer 1

Fixed your error in line 104 of your codesandbox by converting your function into an actual JSX element.
if (edit)
return (<ElementFormClass
endpoint={endpoint}
data={data}
setFormData={setFormData}
cb1 = {(pk) => setDeleted(true)}
cb2 = {(e) => setEdit(false)}
/>);
This is a common error people face in react, where they use a react component as a function rather than JSX.