CODEWITHSUNDEEP
reactjsmaterial-ui
Shamoon
Shamoon

Reputation: 43531

Can't .map for a material RadioGroup

I have:


  const documentTypes = [
    'General',
    'Email',
    'Fiction story',
    'Blog post',
    'Newsletter',
    'Review',
    'Website content'
  ]

and

        <FormControl component="fieldset">
          <FormLabel component="legend">Document Type</FormLabel>
          <RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
            {documentTypes.map((documentType, idx) => {
              <FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
            })}
            <FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
          </RadioGroup>
        </FormControl>

but I don't see all of the options. Just the other. What am I doing wrong?

This is with material-ui for react.

Upvotes: 1

Views: 42

Answers (1)

Yoandry Collazo
Yoandry Collazo

Reputation: 1212

I think you only need to return the FormControlLabel in the map.

Options 1) remove the {} around the FormControlLabel

   <FormControl component="fieldset">
          <FormLabel component="legend">Document Type</FormLabel>
          <RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
            {documentTypes.map((documentType, idx) => 
              <FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
            )}
            <FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
          </RadioGroup>
        </FormControl>

Option 2) Just add return before FormControlLabel

<FormControl component="fieldset">
          <FormLabel component="legend">Document Type</FormLabel>
          <RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
            {documentTypes.map((documentType, idx) => {
           return <FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
            })}
            <FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
          </RadioGroup>
        </FormControl>

Upvotes: 1

Related Questions