React Custom component is not getting rendered as expected

user_9576964 0
Viewed 529

I am expecting text : SMALL Medium, Big rendered on screen , but its not getting rendered


 function Box(prop){
        const ele = <div className={prop.cn}>

                    </div>

        return ele
      }

      const ele = <div className="container">
                       <Box cn='small'>SMALL</Box>
                       <Box cn='medium'>Medium</Box>
                       <Box cn='medium'>BIG</Box>
                  </div>

      ReactDOM.render(ele, document.getElementById('root'));

Babel is compiling this JSX to this the picture below, I don't know why children array is not getting populated in BOX function. plz help

enter image description here

jsx babeljs reactjs javascript
2 Answers

use :

function Box(prop){
    const ele = <div className={prop.cn}>
                     {prop.children} 
                </div>

    return ele
  }
user_73835200

You should use children prop for provide Box element content to the div element inside it:

function Box({cn, children}){
  const ele = <div className={cn}>
                 {children} 
              </div>
  return ele
}
user_132615590
Related