How do I implement a toggle button with React?

Question

I want my toggle button to switch all my Celsius temperatures to Fahrenheit, but I don't know how to do this in this particular app. The Celsius temperature is defined in the state with an axios call:

class App extends Component {
   state = {
     temperature: undefined,

And then I have my Weather component:

const Weather = props => {
  let tempC = props.temperature;
  let tempF = (props.temperature * 9) / 5 + 32;
  return (
    <div className={Styles.outputs}>
      {props.id && props.country && (
        <div className={Styles.fontIcon}>
          <i className={`owf owf-${props.id}`} />
        </div>
      )}
      {props.city && props.country && (
        <h2 className={Styles.outputCity}>
          {props.city}, {props.country}
        </h2>
      )}
      {props.main && props.description && (
        <div className={Styles.outputDesc}>
          {props.main}/{props.description}
        </div>
      )}

      {props.id && props.country && <Toggle />}

      <div className={Styles.outputDatas}>
        <div className={Styles.outputData}>
          {props.temperature && (
            <div className={Styles.outputTitle}>
              Temperature
              <p className={Styles.outputResult}>{props.temperature}°C</p>{" "}
            </div>
          )}
        </div>

        <div className={Styles.outputData}>
          {props.wind && (
            <div className={Styles.outputTitle}>
              Wind
              <p className={Styles.outputResult}>{props.wind} m/s</p>
            </div>
          )}
        </div>

        <div className={Styles.outputData}>
          {props.humidity && (
            <div className={Styles.outputTitle}>
              Humidity
              <p className={Styles.outputResult}>{props.humidity}%</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

I have tried to make two different axios calls for the different temperatures and I was trying to play with the buttons and the props but I can't make it work.

I want to use my Toggle switch to change from Fahrenheit to Celsius.

const Toggle = () => {
  return (
    <label className={Styles.switchWrap}>
      <input type="checkbox" />
      <div className={Styles.switch} />
    </label>
  );
};

Faisal Arshed · Accepted Answer · 2019-05-12 18:55:37Z

1

First, you need to record the state of toggle button so you can switch between temperatures accordingly. Something like,

state = { toggleOn: false }; //true when button is checked

Then, replace {props.temperature}°C with { this.state.toggleOn ? tempF+'°F' : tempC+°C }

When toggleOn is true, it will render temp in Fahrenheit, otherwise in Celsius.

Hope this helps!

answered May 12, 2019 at 18:55

Faisal Arshed

5281 gold badge4 silver badges14 bronze badges

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

2 Comments

Stranyka Over a year ago

Thanks for your help but where should I put the state for the Toggle? It is a functional component it doesn't have state, should I make it a class component?

Faisal Arshed Over a year ago

You can keep the state in the parent component and pass a callback prop to the toggle component to update state. <Toggle toggleState={() => this.setState({ toggleOn: !this.state.toggleOn })}/>. Then, call the function as this.props.toggleState() in the toggle.

Avanthika · Accepted Answer · 2019-05-12 19:03:21Z

1

From your app.js component, pass a temperature-change callback handler to <Weather /> component - Like this:

class App extends Component {
   constructor(props) {
     super(props);
     // Keeping it Celcius by default
     this.state = {
       temperatureUnit: "C"
     }
   }

   onTemperatureChange = temperature => {
     this.setState({
       temperatureUnit
     }, () => {
       // If you have a API call to make, this is place.
     });
   }

   render() {
     return <Weather temperatureUnit={this.state.temperatureUnit} onTemperatureChange={this.onTemperatureChange} />
   }
}

From Weather component, pass it down to Toggle component.

{props.id && props.country && <Toggle temperatureChanged={props.onTemperatureChanged} />}

And don't forget to calculate the value based on chosen temperature unit wherever you display it.

<div className={Styles.outputData}>
   {props.temperature && (
     <div className={Styles.outputTitle}>
        Temperature
        <p className={Styles.outputResult}>
           {props.temperatureUnit === "C"
              ? `${props.tempC} °C`
              : `${props.tempF}F`}
        </p>
     </div>
   )}
</div>

Track the switch changes in toggle component.

const Toggle = props => {
  return (
    <label className={Styles.switchWrap}>
      <input
        onChange={event =>
          event.target.checked
            ? props.temperatureChanged("F")
            : props.temperatureChanged("C")
        }
        type="checkbox"
      />
      <div className={Styles.switch} />
    </label>
  );
};

edited May 12, 2019 at 19:03

answered May 12, 2019 at 18:57

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

1 Comment

Stranyka Over a year ago

Thanks for your help but I'm really stuch, and even following all your suggestions is not working. The API is already made in App with axios and gets the temperature in C, the the state is set and distributed to the props in Weather.

Collectives™ on Stack Overflow

How do I implement a toggle button with React?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related