How to change a style of an HTML element in React?-CodePudding

I have two React components

class App extends React.Component {
  render() {
    return (
      <div id="appWrapper">
        <ConfigureWindow />
        <button id="configureClocksButton">Configure clocks</button>
        <section id="clocksHere"></section>
      </div>
    );
  }
}

const ConfigureWindow = () => (
  <div id="configureWindowWrapper">
    <div id="configureWindow">
      <section id="addCitySection">TODO: adding a city</section>
      <div id="verticalLine"></div>
      <section id="listOfCities">
        <header>
          <h1>Available cities</h1>
          <div id="closeConfigureWindowWrapper">
            <img src="..\src\images\exit.png" id="closeConfigureWindow" alt="" />
          </div>
        </header>
        <section id="availableCities"></section>
      </section>
    </div>
  </div>
);

I want "ConfigureWindow" to be shown when "configureClocksButton". I tried to execute it with props, state and a function but got errors. It also would be nice if you explain me how to create new React components with React functions?

CodePudding user response：

You probably want to use the React.JS event onClick (https://reactjs.org/docs/handling-events.html), and a state to store the action. To create a function component, you just have to return the JSX you want to render, and use hooks (https://reactjs.org/docs/hooks-intro.html) and then do a conditional rendering (https://reactjs.org/docs/conditional-rendering.html):

const App = () => {
    const [toggleConfiguration, setToggleConfiguration] = useState(false)

    return (
      <div id="appWrapper">
        {toggleConfiguration && <ConfigureWindow />}
        <button onClick{() => setToggleConfiguration(true)} id="configureClocksButton">Configure clocks</button>
        <section id="clocksHere"></section>
      </div>
    );
}

CodePudding user response：

It's a bit difficult to understand your post, but I gather you want to click the button with id="configureClocksButton" and conditionally render the ConfigureWindow component.

You can accomplish this with some boolean state, a click handler to toggle the state, and some conditional rendering.

class App extends React.Component {
  this.state = {
    showConfigureWindow: false,
  }

  toggleShowConfigureWindow = () => this.setState(prevState => ({
    showConfigureWindow: !prevState.showConfigureWindow,
  }))

  render() {
    return (
      <div id="appWrapper">
        {showConfigureWindow && <ConfigureWindow />}
        <button
          id="configureClocksButton"
          onClick={this.toggleShowConfigureWindow}
        >
          Configure clocks
        </button>
        <section id="clocksHere"></section>
      </div>
    );
  }
}

A function component equivalent:

const App = () => {
  const [showConfigureWindow, setShowConfigureWindow] = React.useState(false);

  const toggleShowConfigureWindow = () => setShowConfigureWindow(show => !show);
  
  return (
    <div id="appWrapper">
      {showConfigureWindow && <ConfigureWindow />}
      <button
        id="configureClocksButton"
        onClick={toggleShowConfigureWindow}
      >
        Configure clocks
      </button>
      <section id="clocksHere"></section>
    </div>
  );
}