CODEWITHSUNDEEP
reactjs
user3174311
user3174311

Reputation: 2003

How to concatenate values to be used in state in REACT

I have an input text like this

<input type="text" id="name" name="name" onChange={this.handleInputChange} value={this.state.name}/>

I changed this to make id dynamic inside a loop but I don't get how to concatenate the value to get it from state:

constructor(props) {
    super(props);
    this.state = {
        value: ''
    };
    this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

{FIELDS.map((ele) => {
    return <div>
        <label className="field-label" htmlFor={ele.name}>{ele.value}</label>
        <input type="text" style={typeText} id={ele.name} name={ele.name}
        onChange={this.handleInputChange}
        value={this.state.???????}
        />
        </div>
})}

what should I put for value?

thanks

Upvotes: 0

Views: 1957

Answers (3)

Alberto Perez
Alberto Perez

Reputation: 2922

state = {
  value: ''
};    

handleInputChange = event => {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

  this.setState({ [name]: value });
}

{FIELDS.map(ele => {
    const { name, value } = ele;

    return <div>
      <label className="field-label" htmlFor={name}>{value}</label>
      <input
        type="text"
        style={typeText}
        id={name}
        name={name}
        onChange={this.handleInputChange}
        value={this.state[name]}
      />
    </div>
})}

Hope this helps.

Upvotes: 0

syjsdev
syjsdev

Reputation: 1336

try like this

const elements = [
  {
     name: 'name',
  },
  {
     name: 'email',
  },
  {
     name: 'password',
  }
];

class Application extends React.Component {
  state = {
  };
  
  handleInput = (name, value) => {
    this.setState({[name]: value})
  }
  
  render(){
    return(
      <div>
        {elements.map((ele, index) => (<div><label>{`${ele.name} : `}</label><input name={ele.name} value={this.state[name]} onChange={(e) => this.handleInput(ele.name, e.target.value)} /></div>))}
        {JSON.stringify(this.state)}
      </div>
    );
  }
}

ReactDOM.render(<Application />, 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>

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20765

I think you need this,

<input 
   type="text" 
   id={ele.name} 
   name={ele.name} 
   onChange={this.handleInputChange} 
   value={this.state[ele.name]}   //This will take dynamic name
/>

Demo

Upvotes: 2

Related Questions