Duplicate components with state values [Updated code for problem] - reactjs

Question

I have a view that has multiple cards with values inside each one.
I can duplicate a card. However, this doesn't preserve the values in the duplicated card.
If Card A has values inside of its state, how can I tell Parent View to create a Card B with Card A values?
Here is my view. I'm rendering multiple cards
{items.map((item, i) => (
{
'VideoCard': <div><Droppable onChange={droppableResponse} /><CreateVideoCard onChange={cardActionResponse} i={i} /></div>,
'AudioCard': <div><Droppable onChange={droppableResponse} /><CreateAudioCard onChange={cardActionResponse} i={i}></CreateAudioCard></div>,
'DescriptionCard': <div><Droppable onChange={droppableResponse} /><CreateDescriptionCard onChange={cardActionResponse} i={i}></CreateDescriptionCard></div>,
'BreakdownCard': <div><Droppable onChange={droppableResponse} /><CreateDescriptionCard onChange={cardActionResponse} i={i}></CreateDescriptionCard></div>,
'Terms': <div><Droppable onChange={droppableResponse} /><CreateTermsCard onChange={cardActionResponse} i={i}></CreateTermsCard></div>
}[item]
))}
When a card sends a response such as delete or duplicate, I go into my cardActionResponse function. Here is the duplicate part:
if (event[0] == 'duplicate') {
//Retrieve item from items array at location event[1]
console.log(items[event[1]])
var data = JSON.stringify(event[2])
console.log(data)
//Retrieve information about which card was duplicated. Not just AudioCard but AudioCard w/ info
items.splice(event[1], 0, items[event[1]])
forceUpdate()
}
Var data returns the duplicated data that I need to insert into my new duplicated card. However this will require me to change up my current structure of my cardList
const [items, setItems] = useState([
'VideoCard',
'AudioCard' ,
'DescriptionCard',
'BreakdownCard',
'Terms',
]);
In addition, I need the ability to send to each card what location it is (i) and I was able to do that with the items.map function.
I'm thinking about creating something like
<CreateVideoCard onChange={cardActionResponse} i={I} data={data} />
Then in my createvideocard component, I'll check if the data is empty, if not I'll swap the states.
Is there an easier way I can duplicate components with state inside? This seems a little extra?

Answer 1

if you post some code it will be helpful to answer.
Anyway, as you have not done that, here is a proposed soln.
pass a callback function say onDuplicate() from parent to cardList--> card. card component should call that function onClick of duplicate.
this onDuplicate function will update the parent state.. here is a sample example
const data = [{
id: 1111,
name:"some name",
//THERE ARE OTHER FIELDS I HAVE NOT ADDED
}]
const CardList = (props) => (
<div>
{props.profiles.map(profile => <Card key={profile.id} onDuplicate={props.onDuplicate} profile={...profile}/>)}
</div>
);
class Card extends React.Component {
duplicate = ()=>{
console.log(this.props)
this.props.onDuplicate({...this.props.profile,id: 222})
}
render() {
const profile = this.props.profile;
return (
<div className="github-profile">
<img src={profile.avatar_url} />
<div className="info">
<div className="name">{profile.name}</div>
<div className="company">{profile.company}
</div>
<div><button onClick={this.duplicate}>duplicate</button></div>
</div>
</div>
);
}
}
class App extends React.Component {
state = {
profiles: data,
};
onDuplicate = (profileData)=>{
console.log("+++++++"+profileData.name+""+profileData.company)
this.setState(prevState => ({
profiles: [...prevState.profiles, profileData],
}));
}
render() {
return (
<div>
<CardList profiles={this.state.profiles} onDuplicate={this.onDuplicate}/>
</div>
);
}
}

Answer 2

The duplicate function should be inside the card and then call a function in the parent passing the current state.
const Parent = () => {
const handleDuplicate = (state) => {
// your logic to create the new card with the initial state
}
<CardA onDuplicate={handleDuplicate}/>
}
const CardA = (props) => {
const { initialState, onDuplicate } = props;
const [state, setState] = useState(initialState);
const duplicate = () => {
onDuplicate(state);
}
}

Answer 3

The key function I had to use was React.cloneElement
I changed my items array to
const [items, setItems] = useState([
<CreateVideoCard onChange={cardActionResponse}/>,
<CreateAudioCard onChange={cardActionResponse}></CreateAudioCard>,
<CreateDescriptionCard onChange={cardActionResponse}></CreateDescriptionCard>,
<CreateDescriptionCard onChange={cardActionResponse}></CreateDescriptionCard>,
<CreateTermsCard onChange={cardActionResponse}></CreateTermsCard>,
]);
and rendered it with
{items.map((item, i) => (
React.cloneElement(item, {i: i})
))}
When I received a request to duplicate I would use cloneElement to add a data prop to my items array:
items.splice(event[1] + 1, 0, React.cloneElement(items[event[1]], { data: data }))
Then in my card constructor. I checked if props.data was undefined. If it was, I would swap out the state and if it wasn't, it would create base structure.