React set an element with one className's min-height equal to the element with another className's min-height

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. For example:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:

const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}

React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. For example:

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:

<div tabIndex={-1} />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

Button.js

import React from "react";

export default function Button(props) {
  return <button>{props.children}</button>;}

Button.js

import React from "react";

export default function Button(props) {
  return <button className={props.cname}>{props.children}</button>;}

App.js

import React from "react";
import "./styles.css";
import Button from "Button";
export default function App() {
  return (
    <div className="App">
      <h1>Hello React App</h1>
      <Button cname="default-1">Default</Button>    </div>
  );
}

Button.js

import React from "react";

function Button(props) {
  return (
      <button className={`box ${props.cname}`}>           {props.children}
      </button>;
  );
}

At the beginning, we initialize our state object. It has a boolean value isBoxVisible that is initially set to false.

state = {
  isBoxVisible:false
};

Next, let’s take a look at our button within our render function. Whenever the user clicks our button, it will toggle the boolean value for isBoxVisible. As you can see, we pass our toggleBox function to the button’s onClick event. Each time the button is pressed, it will toggle the boolean value for isBoxVisible in the component’s state.

toggleBox = () => {
  this.setState(prevState => ({ isBoxVisible: !prevState.isBoxVisible }));
};

render() {
  return (
    <div className="App">
      <button onClick={this.toggleBox}>Show Box</button>

      [...]
    </div>
  );
}

When the state of a component changes, React performs a re-render. So we can react to state changes within our render function. This is the point where we pass the respective CSS classes to our box.

render() {
  const { isBoxVisible } = this.state;

  return (
    <div className="App">
      <button onClick={this.toggleBox}>Show Box</button>

      <div className={`box ${isBoxVisible ? "" : "hidden"}`}>
        
I'm the box
      </div>

    </div>
  );
}