React Error: this.setstate

JavaScript
1

sa
sa1128×263 14 KB

import React from 'react';

class SearchBar extends React.Component{

    state = {term: ''};  

    onFormSubmit= (event)=> {  

        event.preventDefault();

        

        this.props.onSubmit(this.state.term);

    };

    

    render() {

        return (

        <div className="ui segment">

            <form onSubmit={this.onFormSubmit} className="ui form" >

                <div className = "field">

                <label>Image Search</label>

                <input  type ="text"  value ={this.state.term} onChange={e => this.setState({term: e.target.value })} /> 

                </div>

            </form>

        </div>

        );

    }

}

 

export default SearchBar;

import React from 'react';

import SearchBar from './SearchBar';

class App extends React.Component{

    onSearchSubmit (term) {

        console.log(term);

    }

    render() {

        return (

            <div className="ui container" style={{ marginTop: '10px' }}>

                <SearchBar onsubmit={this.onSearchSubmit} />

            </div>

        );

    }

}

 

export default App;
2

Hello @eebann, remember that capitalization matters, and the two props don’t match:

onsubmit !== onSubmit

Hope it helps :slight_smile:

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.