Simple React Question: Child Component will not render

Simple React Question: Child Component will not render
0

#1

Could someone please look at this code and tell me why the child component won’t render? Whenever I put into the the render method for the parent component, the parent component breaks and won’t render any elements at all. What is wrong with my code here?

const Child = (props) => {
  return (
    <p>Well?{props.text}</p>
  )
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: 'War is hard',
      author: 'Sun Tzu'
    }
  } 
  render() {
    return (
      <div>
        <Child text='hmmmm'/>      
      </div>);
  }
}
React.render(<App />, document.getElementById('quote-box'));

React on Codepen problem: html tags throwing token errors
#2

Try ReactDOM.render instead of React.render


#3

The method is ReactDOM.render instead of React.render.


#4

That doesn’t fix the issue. I am doing this on codepen, and react.render is working. Here is the link to the project:

On this fork I’ve removed form the render method, and the rest of the parent component will now render. If I put reactDOM.render instead of react.render at the bottom, then it makes the entire thing not work, for some reason. If I put back into the render method, the

tags stop working.


#5

Try using the following two external scripts instead of what you currently have.
https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js

Then you should be able to add back in the <Child text='hmmmm'/> to your App component’s render method and use ReactDOM.render.