Add user input data to show in a table using react js and redux

Question

There are two user input text fields, and i want to show that data in a table using redux.

<tbody>
    <tr key={key}>
     <td>
       <TextField
         id="FirstName"
         label="First Name"
         type="name"
         value={this.state.fname}                                           
        />
      </td>
      <td>
       <TextField
         id="LastName"
         label="Last Name"
         type="name"
         value={this.state.lastname}                                            
        />
     </td>
   </tr>

Add icon

Have you tried integrating redux in your application? Have you tried to show user input values in table? Please try yourself and let us know what is not working. So that We can help — Hemadri Dasari
– Hemadri Dasari, Commented Nov 18, 2018 at 10:04
why dont you share your entire code which includes redux part as well. — Ashish Kirodian
– Ashish Kirodian, Commented Nov 21, 2018 at 4:12

Afrin Athar · Accepted Answer · 2018-11-21 03:52:13Z

1

Here is the solution,
Firstly To render it on a browser set the default values to your state variables.
constructor(props){
super(props);
this.state = {
fname : 'Foo ',
lastname : 'Bar',
}

}

Now, your code will get the value from state and it will render in DOM as you wanted. And use **defaultValue** in place of Value in input. Attribute 'value' is used when you are setting the values onChange but as you have already declared above in state , use **defaultValue** .

Like I have done below :-

<TextField
 id="FirstName"
 label="First Name"
 type="name"
 defaultValue={this.state.fname}                                           
  />

edited Nov 21, 2018 at 3:52

answered Nov 19, 2018 at 7:52

Afrin Athar

1031 gold badge2 silver badges8 bronze badges

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

4 Comments

Hemadri Dasari Over a year ago

This is not solution for OP’s problem. Moreover OP text inputs doesn’t even have event handler functions so how come anything can work just assigning state to value or defaultValue?

Afrin Athar Over a year ago

Though, I'm not using redux in dis , because for such a small functionality we don't require Redux , neither there are any API calls and if we talk about event handlers , the person has not used event handlers to set the values again and again , the values are directly called from { this.state} . Like from above , it will render in table the static values I have given , Foo and Bar.

Supriya Bhart Over a year ago

i wanted to understand the flow so i will proceed in that way to use redx

Afrin Athar Over a year ago

For that , you need to write action, reducer for that. Please show all your files here so that we could help you.

Collectives™ on Stack Overflow

Add user input data to show in a table using react js and redux

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related