function in render react stack overflow code example

Example 1: How to make a buttom in react stackoverflow

const defaultStyle = {
  width: 100,
  padding: 5,
};

class MultiLevelButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      currentState: 0,
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    const { currentState } = this.state;
    
    if (currentState < this.props.states.length) {
      this.setState({
        currentState: currentState + 1,
      });
    }
  }
  
  reset() {
    this.setState({
      currentState: 0,
    });
  }
  
  render() {
    const { currentState } = this.state;
    const { states } = this.props;
    
    return (
      <button onClick={this.handleClick} style={{border: 'none', outline: 'none'}}>
        {
          states
            .map((s, i) => {
              const stateNumber = states.length - i;
              const overrides = stateNumber <= currentState ? { backgroundColor: '#000', color: '#fff' } : {};
              const style = {
                ...defaultStyle,
                backgroundColor: s,
                ...overrides,
              };
              return <div style={{...style}}>{stateNumber}</div>
            })
        }
      </button>
    )
  }
}

const buttonRef = React.createRef();

ReactDOM.render(
  <div>
    <MultiLevelButton ref={buttonRef} states={['#bbb', '#ccc', '#ddd', '#eee', '#fff']} />
    <MultiLevelButton states={['#fcc', '#cfc', '#ccf']} />
    <div>
      <button onClick={() => buttonRef.current.reset()}>Reset</button>
    </div>
  </div>,
  document.getElementById('app')
);

Example 2: conditional rendering in react js stackoverflow

//conditional rendering in react JS  
<Container>
    {this.state.watchlist.length === 0 && <h1>no movies</h1>}

    {this.state.watchlist.map(item => (<WatchlistMovie
      className="watchlist-movie"
      key={item.id}
      id={item.id}
      title={item.title}
      poster={item.poster}
      overview={item.overview}
      rating={item.rating}
      user={this.props.user}
    />))}

  </Container>