CODEWITHSUNDEEP
reactjsjsx
Jennifer
Jennifer

Reputation: 75

react jsx render actual html in ternary operator?

const Man = ({ name }) => (
  <div>
    {name ? `<div>Phone:</div> ${name} <br />` : ""}
  </div>
);

I saw the html tag rendered on my screen, how to 'execute' it to prevent it being printed in raw?

tried to wrap it with ${} I got [object Object]

Upvotes: 0

Views: 769

Answers (4)

pope_maverick
pope_maverick

Reputation: 980

Why don't you employ some css? it's more practical and holds some foresight..

const Man = ({ name }) => (
  <div>
    {name ? 
      <div styles={{ display: 'block' }}>
       <p>Phone:</p>
       <p>{name}</p>
      </div>
     :
     null
    }
  </div>
);

if you see [object, object] it's most probable that what your'e not trying to view is not a string. just console the name.

if the problem is all the items are printing in row, you should change the style of it's parent

<div style={{ display: 'block' }}>
 {x.map(name => <Man {...{ name } />)}
</div>

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9779

Ways to receive properties

const Man = (props) => (
  <div>
    {props.name ? `<div>Phone:</div> ${props.name} <br />` : ""}
  </div>
);

another way

const Man = ({ name }) => (
  <div>
   {name && (
   <>
     <div>Phone:</div> {name}
     <br />
   </>
   )}
  </div>
)

Upvotes: 0

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9958

You need to replace those literal string inside the `` with a jsx component, wrap those elements inside a father component, another div layer, or if you don't want to, it must be <></> or <React.Fragment></React.Fragment>. Then to parse value of name to string, just wrap it inside {}.

const Man = ({ name }) => (
  <div>
    { name && <> 
        <div>Phone:</div> {name} <br /> 
      </> 
    }
  </div>
)

Upvotes: 0

Nick
Nick

Reputation: 16606

You can do something like this, no need to put the JSX in backticks.

const Man = ({ name }) => (
  <div>
    {name ? (
      <React.Fragment>
        <div>Phone:</div> {name}
        <br />
      </React.Fragment>
    ) : ""}
  </div>
);

By the way, you can use short-circuit rather than ternary if you're either rendering something or nothing at all:

const Man = ({ name }) => (
  <div>
    {name && (
      <React.Fragment>
        <div>Phone:</div> {name}
        <br />
      </React.Fragment>
    )}
  </div>
);

Upvotes: 2

Related Questions