Component code snippets

 Here’s a handful of helpful React component code snippets:

 Simple variable usage:

function Header(props) {
  return (
    <header>
      <h1>{props.pageType2} not found</h1>
    </header>
  )
}
function App() {
  return (
    <div className="App">
      <Header pageType2="Website" />
    </div>
  );
}
export default App;

 Variable usage with values taken from array object (using map function for looping):

    function Main(props) {
        return (
          <main>
            <h2>Try using a different {props.solution}</h2>
            <ul>
              {props.userOptions.map((userOption)=><li key={userOption.id}>{userOption.title}</li>)}
            </ul>
          </main>
        )
      }
      const userOptions = [
        "Try a different wording",
        "Go back to homepage",
        "Try different keywords"
      ];
      
      const userOptionsObject = userOptions.map((userOption, i) => ({ id: i, title: userOption }));
      
      function App() {
        return (
          <div className="App">
            <Main solution="address" userOptions={userOptionsObject}/>
          </div>
        );
      }
export default App;

Inline CSS styles

  function RandomParagraph() {
    return (
      <section>
        <p style={{ textAlign: "left" }}></p>
      </section>
    );
  }

Please note inline styles are not recommended, for more details, see: https://reactjs.org/docs/dom-elements.html#style