CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
John D
John D

Reputation: 295

How to render conditional with classNames with Reactjs

I am trying to use classNames to replace the conditional below in one line.

My problem is that i am not sure what is the right way to write the code because of the div etc...

I have the codes below :

conditional

const { pageTitle, removeTitle = false } = props;   # destructuring

let result;

if(removeTitle){
  result = <div className="header-without-title">{pageTitle}</div>;
} else {
  result = <div className="header-with-title">{pageTitle}</div>;
}

return (<div className="result-title">{result});

};

If the div did not exist, i could write something like this...

const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});

But i am not sure now that I have the div , I would appreciate some help here...

A solution outside of JSX would be very helpful

Upvotes: 1

Views: 602

Answers (3)

Julio Avantt
Julio Avantt

Reputation: 1

There are several answers to this. Depends of each case

Ternary between two classes in React:

<div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>

Ternary between class or null in React Javascript:

<div className={removeTitle ? 'without-title' : null}>

Ternary between render class or not in React Javascript and Typescript:

<div className={...(removeTitle ? { className: 'without-title' } : {})}>

Upvotes: 0

Reyno
Reyno

Reputation: 6505

You can just inline classNames function

const { pageTitle, removeTitle = false } = props;

const result = classNames({"header-without-title": removeTitle, "header-title": !removeTitle});

return (
  <div className="result-title">
    <div className={result}>
      {pageTitle}
    </div>
  </div>);
);

Upvotes: 1

Nikita Madeev
Nikita Madeev

Reputation: 4380

return (
    <div className="result-title">
        <div className={`header-${removeTitle ? 'without-title' : 'with-title'}`}>{pageTitle}</div>
    </div>
);

or with use https://github.com/JedWatson/classnames

return (
    <div className="result-title">
        <div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
            {pageTitle}
        </div>
    </div>
);

EDIT: A solution outside of JSX

const result = (
    <div className={classNames({ 'header-without-title': removeTitle, 'header-with-title': !removeTitle })}>
        {pageTitle}
    </div>
);

return (
    <div className="result-title">
        {result}
    </div>
);

Upvotes: 2

Related Questions