CODEWITHSUNDEEP
reactjs
erod
erod

Reputation: 187

Why this is undefined in React?

Why console.log(this) is undefined?

I have this Component and I try to get value from state and I'm getting error state from undefined, after that I'm try to print on console in onSubmit function this value and I get undefined, what is wron in my code?.

Thank you

import React, {Component} from 'react';
import { Input,Button, Checkbox, Form} from 'semantic-ui-react';
import Layout from '../../components/Layout';
import token from '../../ethereum/token';
import web3 from '../../ethereum/web3';

class Transfer extends Component{
    state = {
        address : '',
        amount : ''
    };

    onSubmit= async (event)=>{
        event.preventDefault();
        const accounts = await web3.eth.getAccounts();
        console.log(accounts);
        console.log(this.state);//Why this is undefined?
        /*console.log(this.state.address);
        await token.methods.transfer(this.state.address,this.state.amount).send({
            from:accounts[0]
        });*/
    }

    render () {
        return (
            <Layout>
                <Form onSubmit={this.onSubmit}>
                    <Form.Field>
                    <Input label='Address' 
                        placeholder='Address' 
                        value={this.state.address}
                        onChange={event=>this.setState({address:event.target.value})}
                    />
                    </Form.Field>
                    <Form.Field>
                    <Input 
                        label='wei' 
                        value={this.state.amount}
                        onChange={event=>this.setState({amount:event.target.value})}
                    />
                    </Form.Field>
                    <Form.Field>
                    <Checkbox label='I agree to do this transfer' />
                    </Form.Field>
                    <Button>Transfer!</Button>
                </Form>
            </Layout>
        );
    };
}

export default Transfer;

Upvotes: 1

Views: 1620

Answers (2)

silencedogood
silencedogood

Reputation: 3299

You have a few things wrong here. When using a class component along with event methods, you should define state in a constructor. Then bind any methods to the proper context. Try this:

class Transfer extends Component{

constructor(props) {
    super(props);

    this.state = {
        address : '',
        amount : ''
    };

    this.onSubmit = this.onSubmit.bind(this);
}

async onSubmit (event) {
    event.preventDefault();
    const accounts = await web3.eth.getAccounts();
    console.log(accounts);
    console.log(this.state);//Why this is undefined?
    /*console.log(this.state.address);
    await token.methods.transfer(this.state.address,this.state.amount).send({
        from:accounts[0]
    });*/
}

Upvotes: 1

Parag Diwan
Parag Diwan

Reputation: 159

React now recommends using functional hooks over class components but still, you want to use the class components, then use normal function syntax

async onSubmit() {
 // body
}

Upvotes: 1

Related Questions