How do I pass a mapping variable from parent to child in React

Solution 1:

You can pass down props to child components very easily.

<Auth userDetails={this.state.items} />

And iside the new class component you can access them as

this.props.userDetails

Solution 2:

It is pretty simple actully. You just do

class AuthComponent extends React.Component {
    render () {
        return (
            <div className="auth-box">
                <div className="auth-card" key="{item.id}">
                    <div className = "App">
                        <h1> Fetch data from an api in react </h1>
                        {
                            this.props.items.map((item) => ( 
                                <ul key = { item.id } >
                                    <li>  User_Name: { item.first_name },</li>
                                    <li>     Full_Name: { item.middle_name },  </li>
                                    <li>  User_Email: { item.last_name } </li>
                                </ul>
                            ))
                        }
                    </div>
                </div>
            </div>
        );
    }
}

and in parent do <AuthComponent items={items} />