Why is my react function returning [object,object]

Question

I have a function in my Numbers component that should return the state however it returns [object,object] I cant see what i've done wrong? I've written a function in Numbers, that returns another function in my apps component!

import React, { Component } from 'react';
import Numbers from './Numbers'
import './App.css';

class App extends Component {
  constructor(props){
    super()
    this.state={
      calcValue:0
    }
  }

  takeValue = (n) => {
    alert(n)
  }

  render() {
    return (
      <div className="App">
        <Numbers submit={(n) => this.takeValue(n)} numberValue={1}/>
      </div>
    );
  }
}

export default App;

Number component:

import React, { Component } from 'react';
import propTypes from 'prop-types';

class Numbers extends Component {
  constructor(props){
    super();
    this.state={
      numberValue:6
    }
  }

  submit = (n) => {
    this.props.takeValue(this.state.numberValue)
  }

  render() {
    return (
      <div>
        <button value={this.state.numberValue} onClick={this.props.submit}>
          {this.props.numberValue}
        </button>
      </div>
    )
  }
}

// Completed.propTypes={
// test:propTypes.string.isRequired

export default Numbers

Just code · Accepted Answer · 2018-12-31 10:02:55Z

3

You are not understanding concept of passing the props. you need to differentiate what you are passing into child component and how you want to call the parent from child.

Change

onClick={this.props.submit}

to

 onClick={this.submit}

and

 submit=(n) => {    
       this.props.takeValue(this.state.numberValue)    
    }

to

  submit = (n) => {
    this.props.submit(this.state.numberValue)
  }

onClick={this.props.submit} will call parent component not the child one

Demo

answered Dec 31, 2018 at 10:02

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lee Over a year ago

Thanks Yes I have seen my mistakes. I am new to React.

Just code Over a year ago

@Lee yes it happens :)

Tony Bui · Accepted Answer · 2018-12-31 13:15:45Z

0

Thanks I have found my error! Should be this.submit not this.props.submit Also I needed to call the takeValue function

Thanks

edited Dec 31, 2018 at 13:15

Tony Bui

1,3079 silver badges18 bronze badges

answered Dec 31, 2018 at 10:03

Lee

2341 gold badge4 silver badges15 bronze badges

2 Comments

Liren Yeo Over a year ago

yep. I think this is what you're looking for: stackblitz.com/edit/react-dobewq

Treycos Over a year ago

This section is reserved for answers, you can thank @Just code by accepting his answer

Collectives™ on Stack Overflow

Why is my react function returning [object,object]

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related