ReactJS Multiple Input problem setState and state

Question

Hi guys i need help how to make the editchange will not go through all the input and make changes to it.

When i typed an input inside one of the textbox it repeats to other inputs. Im new to react so i having trouble dealing with this.

the map is on loop, for example it displays three from api and 3 inputs will appear.

See the picture, hope you can help me.

handleSubmitReply(event, discussionid, classid){
        event.preventDefault();
        let userid = sessionStorage.getItem('userid');
        const {
            userAccountId,
            reply
        } = this.state;

        const postData = {
            userAccountId:userid,
            reply
        };
        let sessionToken = sessionStorage.getItem('session');
        let sessToken = sessionToken.replace(/\"/g, "");

        fetch('http://tfismartasp-001-site10.btempurl.com/api/Class/'+ classid +'/discussion/'+discussionid+'/response', {

        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer' + " " + sessToken
        },
        body: JSON.stringify(postData),
        })
        .then(response => {
            if(response.status === 400){
            return response.json();
            }else{
            this.addNotification('success', 'Success', 'All Data is Saved', 'top-right')
            this.componentDidMount();
            return response.json();
            }
        })
        .then(responseData => {
            console.log(responseData);
            return responseData;
        })
        .catch(err => {

            console.log("fetch error" + err);
        });

    }
this.handleChange = this.handleChange.bind(this);

handleChange(event) {
                event.preventDefault();
                console.log(event.target.name)
                console.log(event.target.value)
                this.setState({
                    [event.target.name]: event.target.value
                });
            };


{discussionData.map(dd => (
  <input type="text" class="form-control bg-light" placeholder="Reply" name={dd.discussion.instructions} value={this.state[dd.discussion.instructions]} onChange={this.handleChange} />
))}

here is the updated code, what will i do to the postData "reply" when i submit it. it requires to fill all the fields.

How to serialize it to be posted in my API

You need to set unique name to your inputs so that their state can be managed separately. — Atin Singh
– Atin Singh, Commented Apr 14, 2020 at 11:21
All of your inputs have name="reply", so event.target.name will always be "reply", s that's all you'll ever set in state. You'll need to give both the inputs and the state properties unique names based on item. You haven't shown us what items contains, so it's hard to be more specific, but for instance if each item had a name property, you'd use name={item.name} value={this.state[item.name]} and then your handleChange would update it correctly. — T.J. Crowder
– T.J. Crowder, Commented Apr 14, 2020 at 11:21
Hi @T.J.Crowder i updated my code your suggestion works. I have another problem after its in the post thanks — Michael Ben Gabriel
– Michael Ben Gabriel, Commented Apr 14, 2020 at 11:39

Luïs · Accepted Answer · 2020-04-14 11:23:14Z

1

event.target.name will always be "reply" as every one of your inputs has name="reply".

Giving every input a unique name should fix your problem.

answered Apr 14, 2020 at 11:23

Luïs

2,9334 gold badges23 silver badges35 bronze badges

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

Comments

Qubaish Bhatti · Accepted Answer · 2020-04-14 11:39:53Z

0

Try Something like that

handleChange(event, i) {
                event.preventDefault();
                console.log(event.target.name)
                console.log(event.target.value)
                this.setState({
                    [`${event.target.name}{index}`]: event.target.value
                });
            };


{items.map((item, index)=> (
  <input type="text" class="form-control bg-light" placeholder="Reply" name=`name${index}` value= 
  {this.state.reply} onChange={e => this.handleChange(e, index)} />
))}

And create initial state as an array. May be this will help you.

Thanks

answered Apr 14, 2020 at 11:39

Qubaish Bhatti

7486 silver badges23 bronze badges

2 Comments

Michael Ben Gabriel Over a year ago

Hi @Bhatti i did this name={item.name} value={this.state[item.name]}. Im on POST data now. What will be the postData to serialize the input? this is my data postData = { userAccountId:userid, reply }; reply part

Qubaish Bhatti Over a year ago

this.state should have all the values. Just console.log(this.state) and analyse data and see what you want and send it in a post request. Something like that {reply: JSON.stringify(this.state)}

Collectives™ on Stack Overflow

ReactJS Multiple Input problem setState and state

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related