Add html element inside of react component

Question

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.

Houssam · Accepted Answer · 2021-10-24 15:28:29Z

5

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>
  );
}

answered Oct 24, 2021 at 15:28

Houssam

1,8751 gold badge7 silver badges24 bronze badges

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

Comments

Franz Diebold · Accepted Answer · 2021-10-24 15:28:38Z

1

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;

answered Oct 24, 2021 at 15:28

Franz Diebold

6408 silver badges21 bronze badges

Comments

Mush-A · Accepted Answer · 2021-10-24 15:44:25Z

1

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>
    </>
}

edited Oct 24, 2021 at 15:44

answered Oct 24, 2021 at 15:38

Mush-A

4573 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add html element inside of react component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related