React use parameters in jsx variable

Question

I'm new to react and I'm trying to substitute a part of a jsx return I'm repeating in a react component, but there are slight differences in each repetition so I want to pass a simple boolean as a parameter to the variable so I can check those inside jsx. Here is what I've done so far:

function links(condition){
   console.log("Condition is: " + condition);
   return(<h1 className={`mr-10  ${ condition === true ? 'flex' : 'hidden' }`>Test</h1>);
}

const Navbar = () => { 
   return( <nav>
       <div> {links.call(false)} </div> 
       <div> {links.call(true)} </div>
   </nav> 
); }

This returns Condition is: then Condition is: Undefined in the console. How can I achieve this?

Did you try to actually look up what .call does? Also, if you want to split code in that way, in my opinion you should almost always make links a component. — super
– super, Commented Sep 23, 2022 at 7:13
Why not directly calling links like: links(false) and links(true) in the JSX? — Ritik Banger
– Ritik Banger, Commented Sep 23, 2022 at 7:15

Johnny Missile · Accepted Answer · 2022-09-23 07:17:47Z

2

Down there you can see the "proper" way of using react:

function Links({ condition }) {
  return(
    <h1 className={`mr-10  ${ condition === true ? 'flex' : 'hidden' }`>
      Test
    </h1>
  );
}

const Navbar = () => { 
  return(
    <nav>
      <div>
        <Links condition={false} />
      </div> 
      <div>
        <Links condition={true} />
      </div> 
    </nav> 
  );
}

Note:

Better call you component with a caps: link => Link
To call a component use <Component {...props} />
The props (parameters) are passed as a object in the first parameter of the function

answered Sep 23, 2022 at 7:17

Johnny Missile

2923 silver badges9 bronze badges

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

2 Comments

Turgut Over a year ago

I see, so I have to create a component for it, right? This indeed worked. Thanks, guess I wasn't thinking the "react" way.

Johnny Missile Over a year ago

Yep, if you want to reuse the logic, you create a separated component and pass him down props and logic.

Collectives™ on Stack Overflow

React use parameters in jsx variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related