Adding Inputs to State and Show in React

by Abdul Rawoof A R Updated: Jan 24, 2023

In this kit, we're going to see how to add inputs to state and show in React with simple steps. We can able to add inputs to state by declare a state variable that tracks the value of the input field and Add an onChange prop to the input field then use event. target. value to get the input field's value and update the state variable. Where the props are used to set the initial state of the Component is a general anti-pattern of React. This implies that the state of the component is tied to the props of the component. The issue with doing this is that the constructor is only ever called once in the life cycle of the component. We can add any number of inputs and and show it. To implement this, use the ready-made code snippet below by just copying the code and paste it in your IDE with react library. Explore more top trending libraries and code snippets on kandi.

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 : 86License : CC BY-SA 4.0

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.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
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.
Import React and ReactDOM in index.js file.
Open the terminal from IDE.
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.

The solution is created in Visual Studio Code 1.73.1.
The solution is tested on node v18.12.1 and npm v8.19.2.
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.