Props react

Pass props in react

/* PASSING THE PROPS to the 'Greeting' component */
const expression = 'Happy';
<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component

/* USING THE PROPS in the child component */
class Greeting extends Component {
  render() {
    return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
  }
}

Props in class react

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

Source: reactjs.org

React js props

function App() {
  return (
    <div className="App">
      <NewComponent name="Ariful Islam Adil" profession="Web-Developer"></NewComponent>
    </div>
  );
}

function NewComponent(props) {
  return (
    <div className="test-class">
      <h1>Name: {props.name}</h1>
      <h3>Profession: {props.profession}</h3>
    </div>
  )
}
export default App;

Créer composant react

1. Dans le terminal :
npx create-react-app [ nom dossier]
cd [ nom dossier]
npm start

2.désinstaller package :
npm uninstall -g create-react-app

Similar codes

0 vote196 views1 answer
React js loop through array of objects
Javascript React
0 vote285 views1 answer
React native image path in vriable
Javascript React
0 vote234 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React
0 vote196 views1 answer
Await zoomus.joinmeeting crashing app react native
Javascript React
23 votes217 views6 answers
Map react
Javascript React
1 vote215 views1 answer
Inject Javascript Function not working in Android React Native WebView but work fine in iOS React Native
Javascript React
59 votes204 views3 answers
Npm react router dom
Javascript React
0 vote189 views1 answer
React time input
Javascript React
0 vote199 views1 answer
React js child css
Javascript React
0 vote234 views3 answers
React loop through array
Javascript React