(React) feels complicated. Is this the right way?

JavaScript
1

Hi. So I am writing some basic React trying to make sure I “get it”.
I spent more than than I want to admit just making this:

very simple.

  1. App fetches a list of genres (Chuck Norris jokes) and renders Header
  2. Header loops over the genre array and renders GernreButtons
  3. GenreButtons renders a div with an onClick event
  4. onClick handler calls upwards with this.props.genre bound
  5. Header does not do anything special with the event, just pass it to App.
  6. event finally is handled by App handleclick and my console log cries tears of joy.

I like it but.
It feels complicated for something that simple.
Am I doing things too complicated?

I guess the middle component, Header could be a functional since it only renders and then passes the event to App.

The Button app, I am not so sure! can I make it a function? They say that calling direcly on the onClick is not that optimal.

I find React really exciting but also, it feels like it takes me ages to make anything! is that normal?

Is this the right approach in general? Sorry if I sound vague.
I really like React but it feels overcomplicated.
Im so tired now that I keep trying to use this chat in VIM mode :stuck_out_tongue:

I paste it here in case someone just want to skim it.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {list:[]}
    this.handleClick = this.handleClick.bind(this)
  }
  componentDidMount(){
    axios.get("https://api.chucknorris.io/jokes/categories")
      .then((data)=>this.setState({list: data.data}))
  }
  handleClick(e){
    console.log(e)
  }
  render() {
    console.log(this.state.list)
    return (
      <div className="App">
        <Header clickytoTop={this.handleClick} data={this.state.list}/> 
      </div>
    );
  }
}

class Header extends Component {
  render(){
    return(
      <div clasName="footer">
        {this.props.data.map((genre)=>
          <GenreButton clicky={this.props.clickytoTop}genre={genre}/>
        )}
        </div>
    )
  }
}

class GenreButton extends Component {
  handleClick = () =>{
    this.props.clicky(this.props.genre)
  }
  render(){
    return(
      <div className="genreButton" onClick={this.handleClick}>{this.props.genre}</div>
    )
  }
}
2

It’s not too complicated as long as you can logically sort out step by step instructions which you do :slight_smile: Go with your gut feelings then try to brainstorm it more if you get blocked.

It might not be optimal but it should be sufficient for your app. The other method I can think of is prefetch all the genres when the component is first loaded then display more genres with each button hit.

It takes time and practice to be skillfully adept, no worries you will get to the point where it will be intuitive and no brainer for you to spin up this kind of app.

March on :wink:

1 Like
3

I just came up with just a functional Header component that does it all. It renders divs and attatch a function call with the right genre. I am still not sure what is the better approach

function Header2(props){
  return(

    <div clasName="footer">
      {props.data.map((genre)=>
          <div className="genreButton" onClick={()=>props.clickytoTop(genre)}>
            {genre} 
      
      </div>)}</div>
  )
}
4

This is good and is usually how I do it. Go with it if it meets your needs.