React render HTML from parent component

Question

I run into an issue in the rendering. I did some search online, but I didn't find a solution.

In the parent component:

<Child prop1={this.getHeader()}>

getHeader() : function () {
  return (<div> Header </div>)
}

In the Child component:

render() : function () {
  return (<div> {this.props.prop1} </div>)
}

However, the div didn't get rendered. I checked other solution and tried dangerouslySetInnerHTML, but it will render the string of " Header " rather than the element. Could i get some help?

Those code snippets are invalid ReactJs, also, your render function is returning another function instead of just JSX. — andrralv
– andrralv, Commented Apr 28, 2020 at 0:20

Maxim Mazurok · Accepted Answer · 2020-04-28 00:18:19Z

2

Here's a working solution:

class Parent extends React.Component {
  getHeader() {
    return <div> Header </div>;
  }

  render() {
    return <Child prop1={this.getHeader()} />;
  }
}

class Child extends React.Component {
  render() {
    return <div> {this.props.prop1} </div>;
  }
}

ReactDOM.render(<Parent />, document.querySelector('#app'));

https://jsfiddle.net/u5m29cw1/6/

answered Apr 28, 2020 at 0:18

Maxim Mazurok

4,2002 gold badges29 silver badges46 bronze badges

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

2 Comments

kevinzf Over a year ago

Thanks. May I know why it works? I still don't understand what's the problem I have.

Maxim Mazurok Over a year ago

This makes no sense: getHeader() : function () {...}. I changed how you declare functions and that's pretty much it. Please, mark the answer as accept if you find it helpful.

Collectives™ on Stack Overflow

React render HTML from parent component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related