extract props from function into components in React

Question

I am writing a react component I am trying to extract name from App function into Welcome so this should appear Hello, Sara/Hello, Jone and Hello, David. Currently it is appearing as only Hello, and not name after the Hello,.

I am importing this component in other main file in the same folder.

Here is the code

import React from "react";
import ReactDOM from "react-dom";

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Jone" />
      <Welcome name="David" />
    </div>
  );
}

export default Welcome;

Answer 1

The reason why the component just renders Hello, is because you are currently exporting the Welcome component from the module.

Export the App component instead and it will work as expected.

export default App;