CODEWITHSUNDEEP
reactjs
Potney Switters
Potney Switters

Reputation: 3062

React.js combining static elements

I want to dynamically combine different react elements:

const Addresses = () => {
  const addressElement = () => {
    return  <TextInput
      name="addressLine"
     />;
  };
  const addressElement2 = () => {
    return  <TextInput
      name="addressLine2"
     />;
  };
  let address = addressElement1 + addressElement2;
  return (
    <div>
      address
    </div>);
};

Instead of printing the elements this is printing:

[object Object][object Object];

Upvotes: 4

Views: 5587

Answers (2)

Michael Rasoahaingo
Michael Rasoahaingo

Reputation: 1089

Hmm there some little mistakes on your implementation. If you want to render variable you need to use {address}. And combining React component can be made with simply [, ]

Your final code would be like this 

let address = [<addressElement1/>, <addressElement2/>]
return (  
    <div>
        {address}
    </div>
);

edit

let address = [<AddressElement1 key="left"/>, <AddressElement2 key="right"/>]

But you must rename your stateless component width A instead of a

If you don't want to use key you can directly

return (
    <div>
      <AddressElement1/>
      <AddressElement2/>
    </div>
);

Upvotes: 1

Yuya
Yuya

Reputation: 2311

Here's what you want to do:

return (
  <div>
    { addressElement1() }
    { addressElement2() }
  </div>
);

or you can make them into an array beforehand:

const address = [ addressElement1(), addressElement2() ];
return (
  <div>
    { address }
  </div>
);

Upvotes: 8

Related Questions