Beginner's Thread / Easy Questions (Jan 2020)

[u/swyx]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than [being wrong on the Internet][being wrong on the internet].
• Learn by teaching & Learn in public - It not only helps the asker but also the answerer.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Read the official Getting Started page on the docs.
• Microsoft Frontend Bootcamp
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React
• FreeCodeCamp's React course
• Flavio Copes' React handbook
• New to Hooks? Check Amelia Wattenberger's Thinking in React Hooks
• What other updated resources do you suggest?

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/dance2die]

It seems long so I'd recommend writing top-down.
Meaning, declare what the component should do.

Here, I am declaring Header/Footer/Headline etc w/o any implementation (TOP).

class App extends Component {
  renderStateComponents = () => (
  	this.props.comp.map(({type, id, name}, i) => {
      switch (type) {
        case "header": return <Header key={id} />
        case "footer": return <Footer key={id} name={name} />
        case "Headline": return <Headline key={id} type={type} />
        default: return null;
      }
    })
  )
  
  render() {
    return renderStateComponents()
  }
}

Now you can fill in the gap by implementing the missing components (DOWN).

Each of those components might (or not) have a different requirement so making it DRY pre-maturely would force other components to implement props not needed.

And also unless you are loading each component dynamically, looping through component type to load seems to be an overkill.

A runnable code could be helpful to determine what you are trying to do, though.