Add html element inside of react component-CodePudding

title is likely wrong to the question I'm asking, but here is my question. Not sure if this is possible:

I have 2 react components, say

import logo from './logo.svg';
import './App.css';
import Test from './components/Test.js'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Test/>
      </header>
    </div>
  );
}

export default App;

import logo from '../logo.svg';


function Test() {

  const savePressed = () => {
    console.log("hello")
  }

  return (
    <div>
      <img onClick={savePressed} src={logo}/>
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </div>
  );
}

export default Test;

I know that I can render Test inside of App as shown, however, I was wondering if I could insert elements directly into Test from App like such shown below (<p> inside of <Test>):

import logo from './logo.svg';
import './App.css';
import Test from './components/Test.js'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Test>
          <p> hello </p>
        </Test>
      </header>
    </div>
  );
}

export default App;

if this is possible, how can it be accomplished? I am aware that this may be against convention (just use props/state to manage stuff like this,) but am curious nonetheless.

CodePudding user response：

Yes, you can achieve what you described using "Containment" (see the React documentation on this topic).

In other words, whatever you put between <Test> and </Test> will be passed to the Test components in the children prop. So in the Test component you can do the following:

function Test(props) {
  return (
    <div>
      <img onClick={savePressed} src={logo}/>
      {props.children}
    </div>
  );
}

CodePudding user response：

What you are looking for is Containment, so your Test component would look as follows:

import logo from '../logo.svg';


function Test(props) {          // <-- this changed

  const savePressed = () => {
    console.log("hello")
  }

  return (
    <div>
      <img onClick={savePressed} src={logo}/>
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
      {props.children}       // <-- this is new
    </div>
  );
}

export default Test;

CodePudding user response：

Yes, you can do that. But you have to place <p> hello </p> inside the Test component using props.children. When you place some JSX inside the tags of a component like that, then that JSX element becomes the child of the component. You can access the child from the as props.children in your Test component and place it where you like.

Example

const App = () => {
    return <>
       <h1>Header</h1>
       <Test>
            <p>Lorem ipsome....</p>
       </Test>
       <h1>Footer</h1>
    </>
}

const Test = (props) => {
    return <>
        <h2>Component Start</h2>
             {props.children}
        <h2>Component End</h2>
    </>
}