Import a props since an other file for a component ReactJs

May 9, 2022

i have a question about the range of the props. I would in my App.js just call the component with 2 props (just below) and use those props in my other file "PrimaryButton.js".

function App() {
  return (
    <div className="App">
      <PrimaryBouton Type='primary' Title='Lorem Ipsum'/>   
    </div>
  );
}

export default App;

Here is my other file :

import './PrimaryButton.css';
import React from 'react';

class PrimaryBouton extends React.Component {

  render(props) {
    return (
      <button className={props.Type}>
        <span>{props.Title}</span>
      </button>
    );
  }
}

export default PrimaryBouton ;

My Goal is to use the props on App.js to define here the css class of my button and his span.
I don’t really know how to "import my props" in this file so if someone can help me thx !

>Solution :

To utilize props in your case, it would look like this:

import './PrimaryButton.css';
import React from 'react';

class PrimaryBouton extends React.Component {
  render() {
    const { title, type } = this.props;

    return (
      <button className={type}>
        <span>{title}</span>
      </button>
    );
  }
}

export default PrimaryBouton;

I would recommend naming your props lowercase opposed to uppercase. There are instances where you will eventually pass props as uppercase, like passing a component via props, so naming it uppercase generally indicates that.