I am playing with React and trying to save the text that user type to the input to the state. I have added to the textarea an onChange attribute for setting the state.

However, when I start typing, I see error in the console stating TypeError: _this.setState is not a function.

I've tried different ways of trying to fix it, but still don't have it.

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={e => this.setState({ item_msg: e.target.value })} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

class App extends Component {
    constructor () {
        super();
        this.state = {
          item_msg: ''
        }
    }

    handleSubmit(e){ 
        e.preventDefault();

        console.log(this.state.item_msg);  
    }  

    render() {
        return (
            <div className="App">
                <MainHeaderr />
                <Container>
                    <NewItemForm send_form={this.handleSubmit.bind(this)} />
                </Container>
            </div>
        );
    }
}

export default App;

I am playing with React and trying to save the text that user type to the input to the state. I have added to the textarea an onChange attribute for setting the state.

However, when I start typing, I see error in the console stating TypeError: _this.setState is not a function.

I've tried different ways of trying to fix it, but still don't have it.

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={e => this.setState({ item_msg: e.target.value })} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

class App extends Component {
    constructor () {
        super();
        this.state = {
          item_msg: ''
        }
    }

    handleSubmit(e){ 
        e.preventDefault();

        console.log(this.state.item_msg);  
    }  

    render() {
        return (
            <div className="App">
                <MainHeaderr />
                <Container>
                    <NewItemForm send_form={this.handleSubmit.bind(this)} />
                </Container>
            </div>
        );
    }
}

export default App;

• javascript
• reactjs

• Functional ponents are stateless so you can't call setState within them – Anthony Commented Mar 19, 2018 at 17:00
• Either put const NewItemForm = props => ( into the App classes constructor or you cant use this – Jonas Wilms Commented Mar 19, 2018 at 17:02

4 Answers 4

Functional ponents do not have lifecycle methods and... state :)

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={e => this.setState({ item_msg: e.target.value })} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

This won't work:

onChange={e => this.setState({ item_msg: e.target.value })} />

What you need is to pass callback:

const NewItemForm = props => (
    <Form onSubmit={props.send_form}>
        <Form.Group>
            <TextArea 
                placeholder='Name your first item here' 
                name='item_msg'
                onChange={props.onInputChange} />
            <Form.Button primary content='Create Item' />
        </Form.Group>
    </Form>
)

class App extends Component {
    constructor () {
        super();
        this.state = {
          item_msg: ''
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleSubmit(e){ 
        e.preventDefault();
        console.log(this.state.item_msg);  
    }  
    handleInputChange(e) {
        this.setState({ item_msg: e.target.value })
    }

    render() {
        return (
            <div className="App">
                <MainHeaderr />
                <Container>
                    <NewItemForm send_form={this.handleSubmit} onInputChange={this.handleInputChange} />
                </Container>
            </div>
        );
    }
}

I get where you are ing from, but NewItemForm will get transpiled to React Element so this will reference that Element, not the App ponent.

React without JSX

Functional ponents are stateless so you can't call setState within them. You can pass a callback from your parent ponent that sets state in the parent ponent as follows:

handleChange = e => this.setState({ item_msg: e.target.value });

<NewItemForm onChange={this.handleChange} />

And then in your NewItemForm ponent:

<TextArea 
  placeholder='Name your first item here' 
  name='item_msg'
  onChange={props.onChange} 
/>

NewItemForm is function ponent and function opent does not have lifecycle method use class ponent.

You need to either use arrow function or bind the function in constructor like below

constructor(props) {
super(props);
this.state = { date: new Date() };
this.tick = this.tick.bind(this);
}
setInterval(()=>this.tick, 1000);

or Use arrow function

setInterval(()=>this.setState({
    date: new Date(),
  }), 1000);