CODEWITHSUNDEEP
javascripthtmlnode.jsreactjs
Bilal Jama
Bilal Jama

Reputation: 13

Warning: Functions are not valid as a React child. ReactJS

There is an issue with my "Board" class. I've been searching everywhere for a solution but can't seem to solve it. Please tell me what I'm doing wrong.

Error message is: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

class Test extends Component {
  state = {
    editing: false
  };

  edit = () => {
    this.setState({ editing: true });
  };

  remove() {
    alert("removing");
  }
  save = () => {
    var val = this.refs.editedtext.value;
    console.log(val);
    this.setState({ editing: false });
  };

  RenderNormal = () => {
    return (
      <div className="commentContainer">
        <div className="commentText" style={{ fontSize: "100px" }}>
          {this.props.children}
        </div>
        <button onClick={this.edit} className="btn btn-primary">
          Edit
        </button>
        <button onClick={this.remove} className="btn btn-danger">
          Delete
        </button>
      </div>
    );
  };
  RenderForm = () => {
    return (
      <div className="commentContainer">
        <textarea
          ref="editedtext"
          defaultValue={this.props.children}
        ></textarea>
        <button onClick={this.save} className="btn btn-danger">
          Save
        </button>
      </div>
    );
  };
  render() {
    if (this.state.editing) {
      return this.RenderForm;
    } else return this.RenderNormal;
  }
}

**class Board extends Component {
  state = {
    comments: ["Comment1", "Comment2", "Comment3"]
  };
  render = () => {
    return (
      <div>
        {
          (this.state.comments.map = (text, i) => {
            return <Test key={i}>{text}</Test>;
          })
        }
      </div>
    );
  };
}**

export { Test, Board };

Index.JS:
ReactDOM.render(
  <div>
    <Board />
  </div>,
  document.getElementById("app")
);

Upvotes: 0

Views: 145

Answers (1)

Ian
Ian

Reputation: 6124

  render() {
    if (this.state.editing) {
      return this.RenderForm;
    } else return this.RenderNormal;
  }

Here in your render function, you're returning one of the two functions, rather than the result of calling them. If you simply add parentheses to the end of RenderForm and RenderNormal (ie, return this.RenderForm(); it should work fine, as then you'll be returning the result of calling the function.

Upvotes: 1

Related Questions