Update state by changing an entire object within state array - reactjs

Question

I'm trying to create rows of inputs that updates the state of my application. The app is currently only two components, TimeCalc and ItemsList. State is stored in TimeCalc, and ItemsList handles the conditional render (either show state, or show rows of input.
I have managed to fetch the edited and updated object, but I'm struggling to replace the updated object with the correct object in state. The objects contain the props _id, title, start and end, and preferably I'd like to search for the matching _id, and replace the entire object in the state. But seeing as the _id prop is a sibling prop of the other props, I'm not sure how to do this.
Here is TimeCalc:
import React from 'react';
import ItemsList from '../components/ItemsList';
const items = [
{
_id: '112233',
title: 'M1',
start: 900,
end: 1800
},
{
_id: '223344',
title: 'M2',
start: 1000,
end: 1900
}
];
export default class TimeCalc extends React.Component {
state = {
items
}
handleUpdate = (update) => {
}
render = () => {
return (
<div class="timeCalc flex center">
<ItemsList items={this.state.items} handleUpdate={this.handleUpdate}/>
</div>
)
}
}
And here is ItemsList:
import React from 'react';
export default class ItemsList extends React.Component {
state = {
editing: null
}
toggleEditing = (itemId) => {
this.setState({
editing: itemId
})
}
handleEditItem = () => {
let itemId = this.state.editing;
this.handleItemsUpdate({
_id: itemId,
title: this.refs[`title_${itemId}`].value,
start: this.refs[`start_${itemId}`].value,
end: this.refs[`end_${itemId}`].value,
})
}
handleItemsUpdate = (update) => {
console.log(update);
this.props.handleUpdate(update);
this.setState( { editing: null } );
}
renderItemOrEditField = (item) => {
if(this.state.editing === item._id) {
return <li key={`editing-${item._id} `} class="list-item flex row">
<input
onKeyDown={this.handleEditField}
type="text"
class="form-input"
ref={`title_${item._id}`}
name="title"
defaultValue={item.title}
/>
<input
onKeyDown={this.handleEditField}
type="text"
class="form-input"
ref={`start_${item._id}`}
name="start"
defaultValue={item.start}
/>
<input
onKeyDown={this.handleEditField}
type="text"
class="form-input"
ref={`end_${item._id}`}
name="end"
defaultValue={item.end}
/>
<button onClick={this.handleEditItem} label="Update Item"/>
</li>
} else {
return <li
onClick = {this.toggleEditing.bind(null, item._id)}
key = {item._id}
class = "list-position">
{` ${item.title} & ${item.start} && ${item.end} && ${item._id}`}
</li>
}
}
render = () => {
return (
<ul class="itemsList">
{this.props.items.map((item) => {
return this.renderItemOrEditField(item);
})}
</ul>
)
}
}
I'm trying to recreate MeteorChef's "Click to Edit fields in React", but he's storing the state in a Meteor way.

Answer 1

I'd suggest that you move all of the state to the parent component. Keeping ItemsList stateless separates your concerns more neatly and makes the code much simpler to reason about. In this scenario, all ItemsList needs to be concerned with is presenting data based on the state stored in the parent. In your TimeCalc component, add an "editing" key to the state object, and add a method to handle updates from ItemsList:
state = {
items,
editing: null,
}
handleUpdate = (editing) => {
this.setState({ editing });
}
Then when rendering the child component, pass this handler function, the items array, and the "editing" key as props:
<ItemsList items={this.state.items} editing={this.state.editing} handleUpdate={this.handleUpdate}/>
Now ItemsList can become a stateless functional component, like this:
import React from 'react';
const renderItemOrEditField = (item, editing, handleUpdate) => (
{editing === item._id ? (
<li key={item._id} className="list-item flex row">
<input onKeyDown={handleUpdate(item._id}
// The rest of your content to render if item is being edited
) : (
// content to be rendered if item isn't being edited goes here
)}
);
export default const ItemsList = (props) => (
<ul className="itemsList">
{props.items.map((item) => {
return renderItemOrEditField(item, props.editing, props.handleUpdate);
})}
</ul>
);
This strategy of using "smart" container components that manage state and business logic and "dumb" presentational components can go a long way towards keeping your application more maintainable and less fragile. Hope this helps!