How to render two components in single id element in react

Question

How to render more than on component in single id,i know that single id can not render more than one component, i also tried getElementByClass but the result was same

    function Ads(product) {
        return(
          <div className={product.className} id="user-ads">
         <div className = "col-sm-6 col-md-5">
          <div className = "thumbnail">
          <img src={product.image} alt="product-image"/>
          </div>
          <div className = "caption">
          <div className="border">
             <h3>{product.title}</h3>
             <p>{product.desc}</p>  
                <button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
                </button>  
                  </div>
                    </div>
                      </div>
                        </div>

          );
    }

    function Newad(product) {
        return (
          <Ads title="Forza" desc="rndom text rndom text rndom text rndom text" image="img/img2.jpg" />
          );

}

ReactDOM.render(<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img1.jpg" className="row" />, document.getElementById('all_ads'));
ReactDOM.render(<Newad />, document.getElementById('all_ads'));

score 0 · Answer 1 · answered Sep 21 '16 at 09:20

0

Why would you want to do that? That is not how react works. There should be a single mount point and all other components should be under that mount point

So in your case when you render Newad it automatically calls Ads which is declared inside Newad.

If you want to list multiple ads passed parameters to your add components from NewAd not by rendering it again through different id.

answered Sep 21 '16 at 09:20

Harkirat Saluja

7,768
5
47
73

can you demonstrate me i'm confused i just want to render the Newad in the Ads component so they share same parent div – Osama Xäwãñz Sep 21 '16 at 09:34
Please check my updated answer. Now the `Newad` components are displayed in `Ads` component. – Piotr Berebecki Sep 21 '16 at 09:41

score 0 · Answer 2 · edited May 23 '17 at 12:15

Would either of the two solutions below work for your intended use?

Also, you may find this question useful: Return multiple elements inside React.render()

Solution 1: http://codepen.io/PiotrBerebecki/pen/RGoJvB

function Newad(product) {
  return (
    <div className={product.className} id="user-ads">
      <div className="col-sm-6 col-md-5">
        <div className="thumbnail">
          <img src={product.image} alt="product-image"/>
        </div>
        <div className="caption">
          <div className="border">
            <h3>{product.title}</h3>
            <p>{product.desc}</p>  
            <button className="btn btn-primary" role="button" data-toggle="modal" data-target="#view-detail">
              View Details
            </button>  
          </div>
        </div>
      </div>
    </div>
  );
}

function Ads() {
  return (
    <div>
      <Newad title="Forza" desc="rndom text rndom text rndom text rndom text" image="https://placeimg.com/200/200/nature" className="row" />
      <Newad title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="https://placeimg.com/200/200/tech" className="row" />
    </div>
  );
}

ReactDOM.render(<Ads />, document.getElementById('all_ads'));

Solution 2: http://codepen.io/PiotrBerebecki/pen/NRbBrA
Alternatively you could store your ads in an array of objects and then iterate through them using map() method.

Here is the code:

const ADS = [
  {
    title: "Forza",
    desc: "rndom text rndom text rndom text rndom text",
    image: "https://placeimg.com/200/200/nature",
    className: "row"
  },
  {
    title: "PlayStation 4",
    desc: "Lorem ipsum jipsum Lorem ipsum jipsum",
    image: "https://placeimg.com/200/200/tech",
    className: "row"
  },      
];


function Ads() {
  return (
    <div>
      {ADS.map((product, index) => {
        return (          
          <div key={index} className={product.className} id="user-ads" >
            <div className="col-sm-6 col-md-5">
              <div className="thumbnail">
                <img src={product.image} alt="product-image"/>
              </div>
              <div className="caption">
                <div className="border">
                  <h3>{product.title}</h3>
                  <p>{product.desc}</p>  
                  <button className="btn btn-primary" role="button" data-toggle="modal" data-target="#view-detail">
                    View Details
                  </button>  
                </div>
              </div>
            </div>
          </div>              
        );
      })}
    </div>
  );
}


ReactDOM.render(<Ads />, document.getElementById('all_ads'));

Ideally you should not even do this way. Create an object with data and run map over it, instead of manually calling it 2 times. What if there 100 of newads. — Harkirat Saluja, Sep 21 '16 at 09:51
Thanks for the suggestion @HarkiratSaluja, I've added this approach to my answer. — Piotr Berebecki, Sep 21 '16 at 10:13

How to render two components in single id element in react

2 Answers2