Back ArrowExplore all topics

Adding Inputs to State and Show in React

share link

by Abdul Rawoof A R dot icon Updated: Feb 20, 2023

technology logo
technology logo

Solution Kit Solution Kit  

To send input to the state, we can create a state variable to store the input field values and set an onChange event handler on the information to update the state variable when the input field value changes. Then, put an onClick event handler on a button element and access the state variable in the event handler. 


Here we are using some essential functions to store the input to the state in React: 

  • onChange() - it turns a synthetic event object which consists of useful metadata such as the target input id, name, and current value given by the user. 
  • handleChange() - it is triggered by the input element and triggers the changing of this state value property which changes the values of the input field. This is most important as the react uses states to display information in the DOM. 
  • onClick() - it enables us to call a function and trigger an action when we click an element in our application, such as a button. 
  • setState() - it is an asynchronous call which means if a synchronous call gets called, it may not get updated at the right time. Like to know the object's current value after the update using setState, it may not be given the recently updated value on the developer console. We need to pass a function instead of an object to setState to get synchronous behavior. 
  • render() - the technique that can redirect a page with the help of function render() and, most importantly, render a function used to define the HTML code within the HTML element. It also helps us display certain views in the user interface using certain logic defined in the render function and returns the output. 


Here is an example of how you can add inputs to the state and show it in React:

Fig : Preview of the output that you will get on running this code from your IDE.

Code

In this solution we're using React library.

React, user input add to state and show

Lines of Code : 86dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
const Inputs = props => {
 return (
  <React.Fragment>
   <div>
    {props.xParty} {props.zParty}
   </div>
   <span>{props.yAction}</span>
   <hr />
  </React.Fragment>
 );
};

const ManualInputs = props => {
 return (
  <div>
   <input
    value={props.inputValue}
    onChange={e => props.handleChange(e.target.value)}
    className='InputBox'
    placeholder='Enter Name'
    type='text'
   />
   <button onClick={props.addX}>Submit</button>
  </div>
 );
};

class App extends React.Component {
 state = {
  transactionInputs: [
   { id: 1, xParty: 'Pual', yAction: 'Funds', zParty: 'Leon', amount: 30 },
   { id: 2, xParty: 'Jerry', yAction: 'Loans', zParty: 'Tom', amount: 20 },
   { id: 3, xParty: 'Sarah', yAction: 'Repays', zParty: 'Alex', amount: 20 }
  ],
  inputValue: ''
 };

 handleChange = value => {
  console.log(value);
  this.setState({ ...this.state, inputValue: value });
 };

 addXParty = () => {
  const newName = this.state.inputValue.split(' ');
  const newTransactionInput = {
   id: this.state.transactionInputs.length + 1,
   xParty: newName[0],
   yAction: 'Some action',
   zParty: newName[1],
   amount: 99
  };
  this.setState({
   ...this.state,
   transactionInputs: [...this.state.transactionInputs, newTransactionInput],
   inputValue: ''
  });
 };
 render() {
  return (
   <div>
    {this.state.transactionInputs.map(data => {
     return (
      <Inputs
       key={data.id}
       xParty={data.xParty}
       zParty={data.zParty}
       yAction={data.yAction}
      />
     );
    })}

    <ManualInputs
     addX={this.addXParty}
     inputValue={this.state.inputValue}
     handleChange={this.handleChange}
    />
   </div>
  );
 }
}

    ReactDOM.render( < App / > , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js) then paste the script tag in index.html file.
  6. Import React and ReactDOM in index.js file.
  7. Open the terminal from IDE.
  8. npm start to run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for 'how to add inputs to state and show in react' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Visual Studio Code 1.73.1.
  2. The solution is tested on node v18.12.1 and npm v8.19.2.
  3. React version-18.2.0.


Using this solution, we are able to add inputs to state and show in React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to add inputs to state and show in React.

Dependent Library

reactby facebook

JavaScript doticonstar image 209050 doticonVersion:v18.2.0doticon
License: Permissive (MIT)

The library for web and native user interfaces

Support
    Quality
      Security
        License
          Reuse

            reactby facebook

            JavaScript doticon star image 209050 doticonVersion:v18.2.0doticon License: Permissive (MIT)

            The library for web and native user interfaces
            Support
              Quality
                Security
                  License
                    Reuse

                      You can also search for any dependent libraries on kandi like 'react'.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.