Should I hardcode data or use props in React?

Question

I am new to React and was wondering if we have to use hardcode data like this:

import React from "react";
    import "../src/App.css";

    const header = props => {
      return (
        <header>
          <h1>Content Manager</h1>
        </header>
      );
    };

    export default header;

    import React, { Component } from "react";
    import Header from "../src/header";

    class App extends Component {
      render() {
        return (
          <div>
            <Header />
          </div>
        );
      }
    }

    export default App;

As you can see the code above, I just put "Content Manager" inside h1 as a usual content just like we do in HTML. Or do I need to use props instead of hardcoding:

import React from "react";
import "../src/App.css";

const header = props => {
  return (
    <header>
      <h1>{props.title}</h1>
    </header>
  );
};

export default header;


import React, { Component } from "react";
import Header from "../src/header";

class App extends Component {
  render() {
    return (
      <div>
        <Header title={"Content Manager"} />
      </div>
    );
  }
}

export default App;

Guys if something is not clear please let me know

Answer 1

Basically If you want to reuse a component you should be using props.

Example:

When you need same header component for 3 places saying "Welcome","Hello" and "Hi" and have hard coded you will result in writing 3 header components with your heading as "Welcome","Hello" and "Hi".

something like this:

  const HiHeader = props => { return ( <header> <h1>Hi</h1> </header> ); }; export default HiHeader; const HelloHeader = props => { return ( <header> <h1>Hello</h1> </header> ); }; export default HelloHeader; const WelcomeHeader = props => { return ( <header> <h1>Welcome</h1> </header> ); }; export default WelcomeHeader; and you use them as <HiHeader/> <HelloHeader/> <WelcomeHeader/> 

in case, if you use props you can write a single header and pass different props.

example :

 const header = props => { return ( <header> <h1>{props.title}</h1> </header> ); }; export default header; import Header from './header.js' <Header title="Hi"/> <Header title="Hello"/> <Header title="Welcome"/> 

Answer 2

If your header component going to be reused to display different headers pass in the text as a prop. Else, if you are dead sure that this is gonna be used only once, hard coding is fine.

Cheers,

Answer 3

永远不要硬编码，这是邪恶的！