How to handle multiple inputs in an array with one function in react

Question

My dad gave me a homework to make him an app that can calculate his bills for the house, so i have a title and 2 inputs in each row. Can i make an array of objects in the state and call them from an another component and just map them out and get the values from them?

I am working in react. I have tried to make an array of inputs that i can get values from them with just one function.

state = {
ponovo: [
    {
      id: 1,
      title: 'Izaberi ponovo 1:  ',
      iznos: '' 
    },
    {
      id: 2,
      title: 'Izaberi ponovo 2:  ',
      iznos: ''
    },
    {
      id: 3,
      title: 'Izaberi ponovo 3:  ',
      iznos: ''
    }
  ]}



handleChange = (id, iznos, event, title) => {
this.setState({
  ponovo: this.state.ponovo.map(ponovo => {
    if (ponovo.id === id) {
      ponovo.iznos = iznos
      return (
        { iznos: event.target.value }
      );
    } return ponovo;
  })
});
console.log(id, iznos, title);}


<Ponovo ponovo={this.state.ponovo} handleChange={this.handleChange} />


//Ponovo.js
{this.props.ponovo.map((ponovo) => (
                    <Ponova key={ponovo.id} ponovo={ponovo} handleChange={this.props.handleChange} />))}

//Ponova.js

{title}
<input type='Number' value={iznos} onChange ={this.props.handleChange.bind(this, title, iznos, id, completed)} />
            {iznos}

I cannot enter the values from these inputs, or i can not get values from them. I think that problem is in my handleChange function, i am matching them to their id, but for some reason i can't use event.target.value on them. Any suggestions, tips, help? Thanks! :)

ravibagul91 · Accepted Answer · 2019-07-26 10:54:20Z

1

Your handleChange function should only take id and e(event) from child component, using id you can change state in parent component.

  handleChange = (e,id) => {
    console.log(e.target.value);
    var index = this.state.ponovo.findIndex(ponovo => ponovo.id === id);
    if (index === -1) {
        // handle error
    } else {
        this.setState({
            ponovo: [
                ...this.state.ponovo.slice(0, index),
                Object.assign({}, this.state.ponovo[index], { iznos: e.target.value}),
                ...this.state.ponovo.slice(index + 1)
            ]
        });
    }
  }

Demo

answered Jul 26, 2019 at 10:54

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

1 Comment

Vlada Over a year ago

Thanks, this works perfectly! I have learned a lot from you and your code!

octobus · Accepted Answer · 2019-07-26 14:11:27Z

1

you are using your handleChange function wrongly.

You should send event, and your ponovo object to handleChange function like this

<input value={ponovo.iznos} onChange={(event)=>props.handleChange(event,ponovo)} />

After this you can update your state like this

    handleChange = (event, ponovo) => {
let updatedPonovo = this.state.ponovo.find(singlePonovo => ponovo.id === singlePonovo.id)//this will find which item you would like to update
this.setState({
ponovo: this.state.ponovo.map(ponovo => {
if(ponovo.id === updatedPonovo.id){
return {...ponovo, iznos: event.target.value} 
}
else{
return ponovo;
}
    })
        });}

I hope I could help, good luck with your task :)

edited Jul 26, 2019 at 14:11

answered Jul 26, 2019 at 10:56

octobus

1,2761 gold badge16 silver badges20 bronze badges

5 Comments

ravibagul91 Over a year ago

Have you tested this?

octobus Over a year ago

Hello thank you for the comment I edited now and tested it works, it had some small bugs that I didn't see.

Vlada Over a year ago

Thank, you and ravibagul91 are really great and helpful! :)

octobus Over a year ago

Don't forget to to upvote me and ravibagul91 please :)

Vlada Over a year ago

Sorry dude, i saw your message today, i will upvote you 2 when i reach 15 points in reputation!

Collectives™ on Stack Overflow

How to handle multiple inputs in an array with one function in react

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related