How can I effectively bind json data to a radio button in React?

Question

I have a bit of code that looks like this:

      const companies = [
          {
              id: 1, 
              name: "Acme"
          }, 
          {
              id: 2, 
              name: "Beta"
          }
      ]; 

      ....
      <RadioGroup
        aria-label={title}
        name={title}
        value={this.state.value}
        onChange={this.handleChange}
      >
        {companies.map(v => (
          <FormControlLabel
            value={v.name}
            control={<Radio />}
            label={v.name}
            key={v.name}
          />
        ))}
        />
      </RadioGroup>

The tricky bit is that I have to bind a string type to radio button, for all intents and purposes the company name works.

However, later when I submit the form, I need the whole companies object.

I could do something like:

company = companies.filter(v => v.name === this.state.value);

but it's a little messy.

Is there a simpler way to do this, that I'm missing?

do you have to work with the string? why not pass a whole object value? — John Ruddell
– John Ruddell, Commented Oct 5, 2018 at 6:06
@JohnRuddell Yes? developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio "Value: A DOMString representing the value of the radio button." — dwjohnston
– dwjohnston, Commented Oct 5, 2018 at 6:44

Matt Carlotta · Accepted Answer · 2018-10-05 06:46:20Z

Since you already need the company object, I'd have everything that you'd need about the company on fetch:

const companies = [
  {
    id: 1, 
    name: "Acme",
    ...otherProps
  }, 
  {
    id: 2, 
    name: "Beta",
    ...otherProps
  }
];

then, map over the company array, and pass it down its properties to a small child component that can then pass it back to the parent on FormItemControl's onChange method. The parent then stores the selection to state:

Form.js

...
state = { company: [] };    

handleSubmit = e => {
 e.preventDefault();

 const { company } = this.state;

 ...etc
}

handleCompanySelect = company => this.setState({ selectedCompany: [company] })

render = () => {
 ...
 return (
   <form onSubmit={this.handleSubmit}>
    ...
     <RadioGroup
       aria-label={title}
       name={title}
       value={this.state.value}
       onChange={this.handleChange}
      >
        {companies.map(props => ( 
          <RadioOption
            company={...props}
            key={props.id}
            handleCompanySelect={this.handleCompanySelect}
          />
        ))}
     </RadioGroup>
   ...
 </form>
)

RadioOption.js

import React, { PureComponent } from 'react';
import { Radio, FormControlLabel } from '...';

export default class RadioOption extends PureComponent {

  handleChange = () => this.props.handleCompanySelect(this.props.company); 

  render = () => {
     const { name } = this.props.company;

     return (
       <FormControlLabel
         control={<Radio />}
         name={name}
         value={name}
         label={name}
         onChange={this.handleChange}
       />
     )
  } 
}

Yip of course - I can add onChange events to both the radio group, and the form control label.

Collectives™ on Stack Overflow

How can I effectively bind json data to a radio button in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related