Cuong Ta Cuong Ta - 2 months ago 22
React JSX Question

React - Deal with HTML inner of a component tag

I have a code to run app like this:



import React from 'react'
import { render } from 'react-dom'
import AComponent from './components/AComponent'

render(
<AComponent>
<span id="needShow">HTML inner Component Tag</span>
</AComponent>,
document.getElementById('root')
)





And this is component code:



import React from 'react'
const AComponent = () => (
<div>
<span> Hello of AComponent</span>
</div>
)

export default AComponent





How can I show span_id=needShow? I search Google but don't see necessary information

Answer

Child components are passed to a component via the children prop:

const AComponent = (props) => (
  <div>
      {props.children}
  </div>
);