CODEWITHSUNDEEP
reactjsformsreact-props
NameHere
NameHere

Reputation: 21

Passing Events in ReactJS Form

I'm trying to make a component with React and I have 2 classes ( the App class that has the state and the ImageType class that has a dropdown using select and option). I want to change the state in the App when I make a selection in the ImageType class but I get the error (out.js:6 Uncaught TypeError: Cannot read property 'value' of undefined). I know that I'm doing something wrong but I can't realize what. I want the "value" of the option tag to became the new value of this.state.field Thank you

class ImageType extends React.Component{

    onDone=()=>{
        if(typeof this.props.done === "function"){
            this.props.done(this.props.imageType)
        }
    }

    render(){
        return(
            <div>
                <select value={this.props.imageType} onChange={this.onDone}>
                    <option value="illustration">Illustration</option>
                    <option value="vector">Vector</option>
                </select>
            </div>
        )
    }

}

class App extends React.Component{

    state={
        field:""
    }

    done = (event) =>{
        this.setState({
            field: event.target.value
        })
    }

    render(){
        return(
            <div>
                <ImageType imageType={this.state.field} done={this.done}/>
            </div>
        )
    }
}

Upvotes: 1

Views: 158

Answers (2)

cary
cary

Reputation: 148

@Spartacus are right, since this.props.done function accepts a event parameter, you shouldn't pass a this.props.imageType which is not event type.

Or you can just pass the selected image type to the callback in the App component.

ImageType component

onDone = event => {
  if (typeof this.props.done === "function") {
    this.props.done(event.target.value);
}};

pass the selected value to the callback function in App component,

App component

done = imageType => {
  this.setState({
    field: imageType
});};

check the demo here

Upvotes: 0

Spartacus
Spartacus

Reputation: 429

In ImageComponent you have to pass event in onDone function:

// replaced brackets with event
onDone = event => {
  if(typeof this.props.done === "function"){
    this.props.done(event)
  }
}

Upvotes: 1

Related Questions