React how to update json on right position? - json

Question

I'm using react to display a table with data and inputs with the values.
My question is how to add a event handler inside my code?
And also how to update my JSON on the right position with the right value?
My JSON is a state named cards.
My JSON looks like this:
cards: [{
index: 0,
export: true,
fieldname: 'sub_nr',
caption: "Subnr",
tags: []
}, {
index: 1,
export: false,
fieldname: 'address1',
caption: "Adress",
tags: []
}, {
index: 2,
export: false,
fieldname: 'post_code',
caption: "zipcode",
tags: []
}]
My code generates this:
This is my react code:
const Card = props => {
return props.connectDropTarget(
<tbody>
{ props.connectDragSource(
<tr className="pt-1 pb-1">
<td style={{textAlign: "center"}}>
<input type="checkbox" checked={props.export} />
</td>
<td>
<input type="text" value={props.caption} />
</td>
<td>
<input type="text" value={props.fieldname} />
</td>
<td>
<input type="option" />
</td>
<td style={{textAlign: "center"}}>
<i class="fa fa-arrows" aria-hidden="true"></i>
</td>
</tr>
) }
</tbody>
);
}
const typeCard = Symbol.for('##Type::Card');
const specTarget = {
drop(props) {
return {
index: props.index,
indexnr: props.indexnr,
};
}
};
const specSource = {
beginDrag(props) {
return {
index: props.index,
};
},
endDrag(props, monitor) {
if (!monitor.didDrop()) {
return;
}
const source = monitor.getItem();
const target = monitor.getDropResult();
if (source.index === target.index) {
return;
}
props.moveCard(source.index, target.indexnr);
}
};
const collectTarget = connect => ({
connectDropTarget: connect.dropTarget(),
});
const collectSource = (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
});
const CardWithDnD = ReactDnD.DropTarget(typeCard, specTarget, collectTarget)(
ReactDnD.DragSource(typeCard, specSource, collectSource)(Card)
);
class App extends React.Component {
constructor(props) {
super(props);
this.moveCard = this.moveCard.bind(this);
this.state = {
cards: [{
index: 0,
export: true,
fieldname: 'sub_nr',
caption: "Subnr",
tags: []
}, {
index: 1,
export: false,
fieldname: 'address1',
caption: "Adress",
tags: []
}, {
index: 2,
export: false,
fieldname: 'post_code',
caption: "Postcode",
tags: []
}
]
};
}
moveCard (index, indexnr) {
const { cards } = this.state;
const sourceCard = cards.find(card => card.index === index);
const sortCards = cards.filter(card => card.index !== index)
sortCards.splice(indexnr, 0, sourceCard);
Object.keys(sortCards).forEach(function(nr) {
sortCards[nr].index = parseInt(nr, 10);
});
this.setState({ cards: sortCards });
console.log(this.state.cards);
}
render() {
const { cards } = this.state;
return (
<table className="offset-2 col-8">
{ cards.map((card, i) => (
<CardWithDnD
key={card.index}
indexnr={i}
moveCard={this.moveCard}
{...card}
/>
)) }
</table>
);
}
}
ReactDOM.render(
<ReactDnD.DragDropContextProvider backend={ReactDnDHTML5Backend}>
<App />
</ReactDnD.DragDropContextProvider>,
document.getElementById('root'),
);
I'm already able to update the index on dragging the table row, but I also want to update the Json fieldname and caption when I change the input.
How to do that?

Answer 1

Create a handleChange(event) function and assign it to get the input fields you want to get or set the input from. Then use the passed value inside (event.target.value) and update your state using this.setState() method inside the handleChange(event) function
Check this link for clarification