RadioGroup (index.js:54): Cannot read property 'value' of undefined

[mmarovich]

I'm getting the following error:

Uncaught TypeError: Cannot read property 'value' of undefined
    at index.js:55
    at Array.findIndex (<anonymous>)
    at new RadioGroup (index.js:54)
    at constructClassInstance (react-dom.development.js:6355)
    at updateClassComponent (react-dom.development.js:7839)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)
(anonymous) @ index.js:55
RadioGroup @ index.js:54
constructClassInstance @ react-dom.development.js:6355
updateClassComponent @ react-dom.development.js:7839
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421

index.js:2178 The above error occurred in the <RadioGroup> component:
    in RadioGroup (at Api.js:38)
    in div (at Api.js:36)
    in Api (created by Route)
    in Route (at Routes.js:14)
    in Switch (at Routes.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Routes.js:11)
    in Routes (at App.js:13)
    in div (at App.js:11)
    in App (at index.js:12)
    in MuiThemeProvider (at index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

I'm trying to generate the RadioButtons using a map function.

import React, { Component } from 'react';
import { RadioGroup } from 'react-radio-buttons'

import ClipBoard from './ClipBoard';
import Option from './Option'

class Api extends Component {
    constructor(props) {
        super(props);

        this.state = {
            query: []
        }
    }

    componentDidMount() {
        if (this.state.query.length === 0) {
            this.setState({ query: [...this.state.query, this.props.location.data.host]})
        }
    }

    buildQuery(param) {
        console.log(param)
    }

    onChange(e) {
        console.log(e);
    }

    render() {
        const pathOptions = this.props.location.data.paths.map((option, i) => {
            return <Option path={option} key={i} buildQuery={this.buildQuery}/>
        })
        console.log(this.props.location.data)
        return (
            <div className="api-container">
                <ClipBoard query={this.state.query} />
                <RadioGroup onChange={ this.onChange } horizontal>
                    {pathOptions}
                    <button >Next</button>
                </RadioGroup>
            </div>
        )
    }
}

export default Api;

And my Option component:

import React, { Component, Fragment } from 'react';
import { RadioButton } from 'react-radio-buttons'

import './Option.css';

class Option extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        console.log(this.props)
        return(
            <RadioButton value="Apple">
                Apple
            </RadioButton>
        )
    }
}

export default Option;

I have mapped through previous data using regular inputs and labels, but I wanted to integrate this library. But I can't for the life of me figure out what is going wrong.

[mu29]

RadioGroup's child component should have value, index props. If Option component just renders RadioButton, why don't you use it directly?

const pathOptions = this.props.location.data.paths.map((option, i) => {
    return <RadioButton value={option} key={i} />
})

[mmarovich]

If Option component just renders RadioButton, why don't you use it directly?

Because I might want other functionality on the buttons that would dirty up the parent component. (or maybe I'm just a masochist lol).

Anyway, I changed it according to your specifications and I'm still getting the same error. Here is a link to my repo: https://github.com/mmarovich/usethatapi

[mu29]

Got it! you may have to pull button tag outside of the RadioGroup component :)

[mmarovich]

So I moved the button outside of the RadioGroup, and a new error presents itself:

Uncaught TypeError: owner.getName is not a function
    at Object.getCurrentStackAddendum (ReactComponentTreeHook.js:262)
    at checkReactTypeSpec (checkReactTypeSpec.js:74)
    at validatePropTypes (ReactElementValidator.js:160)
    at Object.cloneElement (ReactElementValidator.js:247)
    at RadioGroup.renderChild (index.js:105)
    at index.js:128
    at Array.map (<anonymous>)
    at RadioGroup.render (index.js:127)
    at finishClassComponent (react-dom.development.js:7873)
    at updateClassComponent (react-dom.development.js:7850)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)
getCurrentStackAddendum @ ReactComponentTreeHook.js:262
checkReactTypeSpec @ checkReactTypeSpec.js:74
validatePropTypes @ ReactElementValidator.js:160
cloneElement @ ReactElementValidator.js:247
renderChild @ index.js:105
(anonymous) @ index.js:128
render @ index.js:127
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421

index.js:2178 The above error occurred in the <RadioGroup> component:
    in RadioGroup (at Api.js:38)
    in div (at Api.js:36)
    in Api (created by Route)
    in Route (at Routes.js:14)
    in Switch (at Routes.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Routes.js:11)
    in Routes (at App.js:13)
    in div (at App.js:11)
    in App (at index.js:12)
    in MuiThemeProvider (at index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[LazerJesus]

+1