React change CSS with input

Question

I want to know how to change the CSS with an input, for example with data from 'Open Weather'. I have already coded a website with just javascript and now I wanna try to learn React but I don't get how to do it. For example with javascript I can easily change the name of the class.

 if( description.indexOf('rain') > 0 ) {
    document.body.className = 'rainy';
  } else if( description.indexOf('cloud') > 0 ) {
    document.body.className = 'cloudy';
  } else if( description.indexOf('sunny') > 0 ) {
    document.body.className = 'sunny';
  } else {
    document.body.className = 'clear';
  }

Maybe someone can help me

I think your question does not fit in SO rules. I suggest you watch some videos and read the documentations. Happy hacking! — ilkerkaran, Aug 18 '21 at 15:55
@ilkerkaran maybe it would be more helpful if you developed on which SO rules the question violates? except for the fact it has been asked before... — Slim, Aug 18 '21 at 16:03

score 0 · Accepted Answer · answered Aug 18 '21 at 16:02

You can refer to this question React Js conditionally applying class attributes

<div className={description.indexOf('rain') > 0 ? 'rainy' :  description.indexOf('cloud') > 0 ? 'cloudy' : ....)}>

or using classnames for a more readable approach

let myWeatherClasses = classNames(
  {
    'rainy': description.indexOf('rain') > 0,
    'cloudy': description.indexOf('cloud') > 0,
    ...
  }
);

React change CSS with input

1 Answers1