CODEWITHSUNDEEP
javascriptcssreactjsconditional-statementsjsx
Adam
Adam

Reputation: 20882

React - Conditional JSX Render

I wanted to ask if there is a better way to write this React Code. Essentially there are 2 buttons and one is always 'active'. The issue is this

    // Menu Config
let menuMessages = false
let menuSentMessages = false
if (menu === 'messages') {
    menuMessages = true
} else {
    menuSentMessages = true
}

Ideally I could do: className={menuMessages == 'messages' ? 'active' : ''}

const Account = () => {
const [menu, setMenu] = useState('messages')

// Menu Config
let menuMessages = false
let menuSentMessages = false
if (menu === 'messages') {
    menuMessages = true
} else {
    menuSentMessages = true
}

return (
        <main className="messages">
            <div className="wrapper">

                <section className="controls">
                    <button
                        onClick={() => setMenu('messages')}
                        className={menuMessages ? 'active' : ''}
                    >
                        Messages
                    </button>
                    <button
                        onClick={() => setMenu('sent')}
                        className={menuSentMessages ? 'active' : ''}
                    >
                        Sent Messages
                    </button>
                </section>

            </div>
        </main>
)}export default Account

Upvotes: 0

Views: 113

Answers (4)

ninadsubba
ninadsubba

Reputation: 36

You could do it this way:

const Account = () => {
  const [menu, setMenu] = useState('messages')

  return (
    <main className="messages">
      <div className="wrapper">
        <section className="controls">
          <button onClick={() => setMenu('messages')}
                  className={menu === 'messages' ? 'active' : ''}>
            Messages
          </button>
          <button onClick={() => setMenu('sent')}
                  className={menu === 'sent' ? 'active' : ''}>
            Sent Messages
          </button>
        </section>
      </div>
    </main>
  )}export default Account

Upvotes: 2

Abito Prakash
Abito Prakash

Reputation: 4770

You can move the checks inside JSX.


return (
        <main className="messages">
            <div className="wrapper">

                <section className="controls">
                    <button
                        onClick={() => setMenu('messages')}
                        className={menu === 'messages' ? 'active' : ''}
                    >
                        Messages
                    </button>
                    <button
                        onClick={() => setMenu('sent')}
                        className={menu === 'sent' ? 'active' : ''}
                    >
                        Sent Messages
                    </button>
                </section>

            </div>
        </main>
);

Upvotes: 0

Diamond
Diamond

Reputation: 3428

It can be better to use Boolean type state like 'isSent'.

const Account = () => {
  const [isSent, setIsSent] = useState(false)

  return (
        <main className="messages">
            <div className="wrapper">
                <section className="controls">
                      <button
                         onClick={() => setIsSent(false)}
                         className={isSent ? 'active' : ''}
                       >
                          Messages
                      </button>
                      <button
                         onClick={() => setIsSent(true)}
                         className={isSent ? '' : 'active'}
                       >
                          Sent Messages
                      </button>
                  }
                </section>
            </div>
        </main>
  )
}

export default Account;

Upvotes: 0

lukeskywaka
lukeskywaka

Reputation: 231

I don't understand what the "menu" is for, but here's my solution

const Account = () => {
  const [menu, setMenu] = useState("messages");
  const [menuMessages, setMenuMessages] = useState(false);
  const [menuSentMessages, setMenuSentMessages] = useState(false);

  const onClick = type => {
    setMenu(type);
    if (type === "messages") {
      setMenuMessages(true);
    } else {
      setMenuSentMessages(true);
    }
  };

  return (
    <main className="messages">
      <div className="wrapper">
        <section className="controls">
          <button
            onClick={() => onClick("messages")}
            className={menuMessages ? "active" : ""}
          >
            Messages
          </button>
          <button
            onClick={() => onClick("sent")}
            className={menuSentMessages ? "active" : ""}
          >
            Sent Messages
          </button>
        </section>
      </div>
    </main>
  );
};

Upvotes: 3

Related Questions