I'm a beginner in React.
I still quite don't understand how to pass props to a class component like we do in a function.
Example of a function:

const SurveyFormReview = ({ onCancel, formValues, submitSurvey, history }) => {
    return (
        ...
        <button
            onClick={() => submitSurvey(formValues, history)}
            className="green btn-flat right white-text"
        >
        ...
    );
};

Example of a class Component:

class ImageUpload extends Component {
    render() {
        return (
            // I want to use props in here
        )
    }
}

CodePudding user response：

Just use whatever attributes you want when using the ImageUpload component:

<ImageUpload propA="someValue" propB={someVariable}/>

From the ImageUpload component, just call the props property:

someFunction = () => {
    var propAValue = this.props.propA;
    var propBValue = this.props.propB;
}

That's it!

CodePudding user response：

You can pass any value as a props in Class and functional components in react. Read more about props

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
};

ReactDOM.render(
    <Welcome name="Sara" />,
    document.getElementById('root')
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

For example

<ImageUpload propExample="property" />

Inside ImageUpload component you can access it by writing:

this.props.propExample