Error passing a selected value to a function

Question

I have the following component that shows the options of a quiz, when the user select a value I want to pass the "item.id" selected in the "handleNext", no código abaixo aparece o seguinte erro:

Uncaught ReferenceError: item is not defined

code:

render () {
    return (
        <UserContext.Provider value={this.state}>
            <UserContext.Consumer>
                {({ current_statement, current_alternative, handleNext}) => (

                   <form>
                        <p>{current_statement}</p>

                        {this.state.current_alternative.map(item => (
                            <React.Fragment key={item.id}>
                                <div>
                                    <input id={item.id} type="radio" name="question"/>
                                    <label htmlFor={item.id}>{item.content}</label>
                                </div>
                            </React.Fragment>
                        ))}

                        <button onClick={(e) => this.handleNext(e, item.id)} type="button">Next</button>

                    </form>
                )}

            </UserContext.Consumer>
        </UserContext.Provider>
    )
}

score 1 · Answer 1 · answered Feb 03 '19 at 02:58

1

The problem is your binding of your Next button:

this.handleNext(e, item.id)

You've added this OUTSIDE of your .map() function, so there is no item (This is explicitly defined on each loop of your this.state.current_alternative map). Move this inside of the .map() array, and you'll be able to access item.

answered Feb 03 '19 at 02:58

Blue

22,608
7
62
92

I could only put it inside the `.map ()` but the button was repeated every time, how can I repeat only one? – Hiago Bonamelli Feb 03 '19 at 03:03
I'm assuming you want the last `item.id`? Use `this.handleNext(e, this.state.current_alternative[this.state.current_alternative.length - 1].id)` – Blue Feb 03 '19 at 03:05
Inside the map, you can also try [this](https://stackoverflow.com/a/38176400/4875631). – Blue Feb 03 '19 at 03:07
is not the last one, I give 5 options to the user, I want the id of the one that he selects in the form – Hiago Bonamelli Feb 03 '19 at 03:08
is a quiz, it has 5 options, when it clicks 'Next' I want to save the selected option – Hiago Bonamelli Feb 03 '19 at 03:09

score 1 · Accepted Answer · edited Feb 04 '19 at 17:43

  handleRadioChange = id => this.setState({selected: id})

  render() {
    ...
    <input id={item.id} type="radio" name="question" onChange={e => this.handleRadioChange(e.event.target.id)} />
    ...

    <button onClick={(e) => this.handleNext(e, this.state.selected)} type="button">Next</button>

In short: You have to store selected id of radio button selected by user in state, then your button will take id from state when the user presses it.

Error passing a selected value to a function

2 Answers2