How to change JSON data through textboxes and buttons in a ReactJS?

Question

I just started learning react.

Please see code in codepen link below.

When you press the edit button, the field in the table is changed to a textbox.

And that's what I want.

I wanna give Click on the edit button again.

How to replace the value of the data in JSON data?

Thanks so much for the help.

let UsersData = [
  {Name: 'AAA',Last:"1111"},
  {Name: 'BBBB',Last:"222"},
]

  constructor(props) {
super(props)
this.state={
  Editing:false,
}
this.toggleEditing = this.toggleEditing.bind(this)}

toggleEditing() {
    let Editing = !this.state.Editing
    this.setState(
      {Editing: Editing}
    )}

FULL CODE IN CODEPEN

Codepen https://codepen.io/StCrownClown/pen/MEQPzP?editors=0010

Jalissa · Accepted Answer · 2017-10-07 18:26:31Z

3

To change your JSON data first you need to get the user input through your TextInput component, to do that you need to define a value and an onChange props to store the value of the input in your state. Given that your input is a custom component I'll pass those props as props.

Like this:

class TextInput extends React.Component {
  render() {
    const {value, onChange, name} = this.props
    return (
      <td>
        <input type="text" 
          value={value} // to display the value
          onChange={onChange} // to store the value on the state
          name={name} // to use use the name as a property of the state
        />
      </td>
    )
  }
}

Then in your TableRow component state, you need to:

Save those value and handle their changes:

this.state = {
    Editing:false,
    // from props to show their current value
    name : this.props.data.Name 
    last: this.props.data.Last
}

// to handle changes
onChange(event){
    this.setState({
      [event.target.name] : event.target.value
    })
  }

and pass the above mentioned props to the TextInput:

<TextInput value={this.state.name} name="name" onChange={this.onChange}></TextInput>
<TextInput value={this.state.last} name="last" onChange={this.onChange} ></TextInput>

To show those values to the user when to Editing is false you need to:

Defined a state for your Table component so it re-renders with the changes and a function that changes that state when the user is done editing:

 this.state = {
      UsersData: UsersData
 }

 saveChanges({key, name, last}){
    // key: unique identifier to change the correct value in the array
    // name: new Name
    // last: new Last
    this.setState(prevState => ({
      UsersData: prevState.UsersData.map(data => {
        if(data.Name === key) return { Name: name, Last: last }
        return data
      })
    }))
  }

Finally, pass that function to the TableRow component:

const rows = [] 
 // now the loop is from the UsersData in the component state to see the changes  
this.state.UsersData.forEach((data) => {
  rows.push (
     <TableRow
        key={data.Name}
        saveChanges={this.saveChanges}
        data={data}
      />
   )
})

and call the saveChanges function in the TableRow component when the Done button is clicked:

saveChanges(){
   const {name , last} = this.state
    this.toggleEditing()
    this.props.saveChanges({
       key: this.props.data.Name,
       name,
       last
   }) 
 }


<button onClick={this.saveChanges} >Done</button>

You can check the full code here.

answered Oct 7, 2017 at 18:26

Jalissa

8869 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thawatchai Over a year ago

It's work! Thanks a lot. And if add a delete button to each row, and when click the delete button, it will delete that line. jsfiddle.net/fpLttxpx/1 Thanks again

Jalissa Over a year ago

@Thawatchai To delete a row you need to create a delete function that searches for the row to delete and pass it to the TableRow. You can check this fiddle.

Thawatchai Over a year ago

Nice!. Thank you very much, and how about add new record. here is my some code jsfiddle.net/oyqf4ps3 Thank you very much.

Jalissa Over a year ago

@Thawatchai To add a new row you could do something like this

Thawatchai Over a year ago

Wonderful, Thanks a lot!. I'm doing about local storage. May you help me check it out? This is the file. > > ufile.io/bducz Thank you very much.

Collectives™ on Stack Overflow

How to change JSON data through textboxes and buttons in a ReactJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related