'text' is missing in props validation react/prop-types-CodePudding

as you may get from the title, passing props in react is not working. And i don´t get why.

function Global(props) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {props.text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

  return (
    <div className="App">
      <Card>
        <CvContext.Provider value={value}>
          <Global text="kk" />
        </CvContext.Provider>
      </Card>
    </div>
  );

CodePudding user response：

Try using state. Get the variables into state and load the component when the state value gets filled.

const [titleText, setTitleText] = useState(props.text || “”);

then inside your return part use {titleText}

I haven’t tested this. Give it a try.

CodePudding user response：

Try destructuring the props like this:

function Global({text}) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

You can keep the rest the same. Destructuring props is (usually) a better practice.

CodePudding user response：

Does it work if you do

import PropTypes from 'prop-types';


function Global(props) {
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {props.text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

Global.propTypes = {
  text: PropTypes.string
}

But your code should work even without it, although you would be getting that warning.

CodePudding user response：

this correction work for me

import PropTypes from "prop-types";

function Global(props) {
  Global.propTypes = {
    text: PropTypes.string,
  };
  return (
    <div>
      <ResponsiveAppBar />
      <Grid sx={{ mt: 7 }}>
        {props.text}
        <HorizontalLinearStepper />
      </Grid>
    </div>
  );
}

export default Global;