Setting values from radio buttons generated with map in react js

Question

I am trying to :

generate radio buttons from a constant array using Map in react
let user select one and set the state with handleChange()

With the following code I was able to achieve 1, but for some reason when I try to display with handleChange() I see it is an empty string.

Could you please help me ?

Thanks

import React, { Component } from "react";

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

export default class MyRadio extends Component {
  constructor(props) {
    super(props);

    this.state = {
      lastName: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    console.log("handleChange() e:" + e.target.value);

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

  render() {
    console.log("render");
    return (
      <form>
        <div>
          {members.map((item) => (
            <React.Fragment>
              <label htmlFor={item.name}> {item}</label>
              <input
                name="lastName"
                key={item.name}
                id={item.name}
                value={item.name}
                type="radio"
                onChange={this.handleChange}
              />
            </React.Fragment>
          ))}
        </div>
        <div></div>
      </form>
    );
  }
}

Kalhan · Accepted Answer · 2021-04-10 15:09:47Z

1

To make this workable solution you have to change the members as follow

const members = [{name: "Araki", name: "Ibata", ...}];

array should be a object array with each object has name property because in the map you are expecting name should be there as item.name.

Or either you have to change the loop without item.name you have to use item

{members.map((item) => (
    <React.Fragment>
          <label htmlFor={item}> {item}</label>
          <input
            name="lastName"
            key={item}
            id={item}
            value={item}
            type="radio"
            onChange={this.handleChange}
          />
    </React.Fragment>
))}

answered Apr 10, 2021 at 15:09

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

2 Comments

takanoha Over a year ago

After trying out I see this warning: Warning: Each child in a list should have a unique "key" prop. It's weird because I set key = {item}

Kalhan Over a year ago

key sohuld be in react.fragment

Collectives™ on Stack Overflow

Setting values from radio buttons generated with map in react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related