How to pass all props in one variable in React?

Question

I'm trying to assign all props in one object and pass all of them in one variable.

Here is my code:

function Slider(props){
    return (
    
        <div className="hero-wrap js-fullheight" style={{height: "1041px"}}>
            <div className="container-fluid px-0">
                <div className="row d-md-flex">
                    <img className="one-third " src={undraw}></img>
                    <div className="one-forth>
                        <div className="text mt-5">
                            <span className="subheading">{props.subheading}</span>
                            <h1 className="mb-3">{props.title}</h1>
                            <p>{props.text}</p>
                            <p><a  href="#" className="btn btn-primary">{props.btnCourses}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const IndexPage = () => {

    let sliderProps = {
        subheading: 'Hi',
        title: 'Hi',
        text: 'Ipsum ut nostrud excepteur qui qui quis exercitation minim Lorem',
        btnCourses: 'Hi'
    };

    return (
        <Slider props={sliderProps} />
    );
}

At here I don't want to write them in <Slider /> and want to assign them out of the return and assign them like props={sliderProps} How can I do it?

Answer 1

You can do the following.

const IndexPage = () => {

    let sliderProps = {
        subheading: 'Hi',
        title: 'Hi',
        text: 'Ipsum ut nostrud excepteur qui qui quis exercitation minim Lorem',
        btnCourses: 'Hi'
    };

    return (
        <Slider {...sliderProps} />
    );
}

to prevent using props every where on your component, you can also destructor it.

const Slider = props => {
    const { title, undraw, text, btnCourses } = props;
    return (
    
        <div className="hero-wrap js-fullheight" style={{height: "1041px"}}>
            <div className="container-fluid px-0">
                <div className="row d-md-flex">
                    <img className="one-third " src={undraw}></img>
                    <div className="one-forth>
                        <div className="text mt-5">
                            <span className="subheading">{subheading}</span>
                            <h1 className="mb-3">{title}</h1>
                            <p>{text}</p>
                            <p><a  href="#" className="btn btn-primary">{btnCourses}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}