Question 118737 in Html Question posted in
Some basic documentation can be found here.

Html – How to style mapped objects in React.JS?

I’m new to React.JS.
I need to make an order form with two switch buttons and then style them. I can’t style them.

I’ve been told to create the buttons this way

{props.options.map((option)=> (
    <div>{option.text}</div>
 ))}

<Header />
<Switch options={[
 {
   text: 'Buy',
   value: 'buy'
 },
 {
   text: 'Sell',
   value: 'sell'
 }
]} />
<Form />
<Profit />
<Button text="Submit" />

Here’s how the buttons should look like in the end
Buy and Sell Buttons in the end

I can’t find a way to style them separately. I’ve also tried conditional classes.

I’ve broken down the order form into several components and put them all together in the app.js file. The switch buttons are in the buy-sell-buttons.js file.

Here’s my code in the buy-sell-buttons.js file

import React from "react";
import './buy-sell-buttons.css';

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
          <div key={i}
            // className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
          </div>
        ));
        return SwitchButtons;
    
}

export default BuySellButtons;

And here’s my code in the app.js file

const App = () => {
    return (
        <div className='binance-box'>
            <div className="all">
                 <AppHeader />
                 <BuySellButtons options = {[
                     {
                        text: 'Buy',
                        value: 'buy',
                        id: 'buy',
                     },
                     {
                        text: 'Sell',
                        value: 'sell',
                        id: 'sell'
                     }
                ]} />
                <Form />
                <Profit />
                <Button />
           </div>
      </div>
    );
};

This code doesn’t throw any errors or warnings.
To style it, I’ve tried conditional classes.

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
        <div key={i}
            className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
        </div>
        ));
        return SwitchButtons;
    
}

Here’s my CSS code

button {
    font-family: 'Open Sans', sans-serif;
}

.option {
    margin: 0 1rem;
    align-items: center;
    padding-bottom: 10px;
    display: flex;

}

.btn {
    width: 10%;
    padding: 5px;
    text-align: center;
    border: none;
    display: flex;

}

.active {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.active:hover {
    background-color: #45a049;   
}

.inactive {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.inactive:hover {
    background-color: #383642;
    color: #7b343d;
}

The items aren’t displayed as flex items, and they only take one styling (they’re not different as they should be).

I’ve done this before in HTML and CSS only, and it worked fine.
Here’s the HTML file

<div class="buy-sell">
     <div data-type="buy" class="box" id="buy">Buy</div>
     <div data-type="sell" class="box" id="sell">Sell</div>
</div>

And my CSS file is practically the same.

.box {
    width: 10%;
    padding: 5px;
    display: inline-block;
    text-align: center;
}

.buy-sell {
    margin: 0 1rem;
    display: flex;
    align-items: center;
    flex: 1;
}

#buy {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

#sell {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

I pretty much don’t have any idea what I’m doing. I’ve tried some different things, like giving them the same style and then tried to somehow change the one with the text=Buy, but nothing worked.
Also, I don’t know if I have to use Flexbox (I did so in CSS); I’ve tried, and it doesn’t work either.

Tags:

2

Answers


  1. 0

    I think the reason that your styles are not being applied is that you are comparing an object/ option to a string/option.id.

    Could you clarify what the option that you are comparing to?

    Login or Signup to reply.
  2. 0

    I think I understand what you want to do. First of all, there is an error in the code in the BuySellButtons function. The condition "option.id === option" is not correct because "option" is an object. I assume that you want to use the "active" style for the currently selected button and the "inactive" style for the others, so they should have a "selected" status, which I have moved up to their parent component.

    The updated code for the BuySellButtons function is as follows:

    function BuySellButtons(props) {
  const SwitchButtons = (
    <>
      {props.options.map((option, i) => (
        <div
          key={i}
          className={`${option.id === props.selected ? 'active' : 'inactive'}`}
          onClick={() => props.onSelect(option.id)}
        >
          {option.text}
        </div>
      ))}
    </>
  );
  return SwitchButtons;
}

    In addition, the BuySellButtons function returns an array of SwitchButtons, not a React component or element. You need to wrap it in a container element, such as <div> or <> </>. I have used <> </>

    The updated App code is as follows:

    const App = () => {
  const [selected, setSelected] = React.useState('buy');
  return (
    <>
      <BuySellButtons
        options={[
          {
            text: 'Buy',
            value: 'buy',
            id: 'buy',
          },
          {
            text: 'Sell',
            value: 'sell',
            id: 'sell',
          },
        ]}
        selected={selected}
        onSelect={setSelected}
      />
    </>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search