React - TypeError: this.props.AccountId is not a function

Question

I've done a research on this issue, but i can't seems to find the solution for my problem.

Other post of the same issue seems to be around binding issues, but i dont think that is the issue here.

When i load the page, the prop should be displayed, but it doesnt show anything.

When i write in the text form, i get the error: TypeError: this.props.AccountId is not a function", and this is where i am stuck at.

import React from 'react';

 class Accountparent extends React.Component {
  constructor(props) {
    super(props);
    this.onFocusChange = this.onFocusChange.bind(this);
    this.state = {accountobj: ''};
  }

   onFocusChange(value){
    this.setState({accountobj: value});
  }
  render() {
    return (
      <div>
        <Account value={this.state.accountobj} AccountId={this.onFocusChange}/>
      </div>
    )
  }
}

class Account extends React.Component {
  constructor(props) {
    super(props);
    this.EditAccount = this.EditAccount.bind(this)
    this.state = {
      accounts: [],
    };
  }
  EditAccount(e){
    this.props.AccountId(e.target.value)
  }


  render() {
    const value = this.props.AccountId;
    return (
      <div>
        <div>The props is: {this.props.dataid}</div>
        <div>Write to textfield to pass data to parent: <input value={value} type="text" onChange={this.EditAccount}/></div>
      </div>

    )
  }
}
export default Account;

EDIT: As @Taki suggested, i should be exporting the parent. That is the solution

Answer 1

Check your code,

EditAccount(e){
    this.props.AccountId(e.target.value)
  }


  render() {
    const value = this.props.AccountId;
    . . .

In EditAccount method, you are using it like a function. In render method you are deriving "value" from it. It can either be a value or a function. NOT both.