How to pass Array from Parent component to Child component in reactjs

Question

I have two components in my project, the First component is App I got this App component when I created a project. And Second Component is ClassRoom. Now in App.js, I have an array, In that array, I have four different names. Now I have to pass those four names for my child component that is ClassRoom. I know how to loop an Array of objects to React. But I don't know how to loop Array and pass that array to child component so help me to achieve this task.

This is App.js

import React from 'react';
import './App.css';
import ClassRoom from './ClassRoom/ClassRoom';

function App() {
  const students = ['shiva', 'krishna', 'ram', 'madhav']
  return (
    <div className="App">
     <ClassRoom></ClassRoom>
    </div>
  );
}

export default App;

This is App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

This is ClassRoom.js

import React, { Component } from 'react'
import './ClassRoom.css'

export default class ClassRoom extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

This is ClassRoom.css

There is no css in ClassRoom.css

My expected output is I need to pass students Array from Parent Component which is App.js to Child Component which is ClassRoom.js. If not, clear with my doubt, please put a comment.

Abishek Aditya · Accepted Answer · 2019-09-27 06:32:56Z

7

Just do <ClassRoom students={students}/>

And in ClassRoom componenets access it using this.props.students

answered Sep 27, 2019 at 6:32

Abishek Aditya

8224 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dostonbek Oripjonov · Accepted Answer · 2019-09-27 06:40:36Z

1

In App.js

function App() {
  const students = ['shiva', 'krishna', 'ram', 'madhav']
  return (
    <div className="App">
     <ClassRoom studentsArray = { students } />
    </div>
  );
}

In ClassRoom.js

export default class ClassRoom extends Component {
    render() {
        return (
            <div>
              <ul>
               {this.props.studentsArray.map( student => `<li> ${student} </li>` )}
             </ul>
            </div>
        )
    }
}

answered Sep 27, 2019 at 6:40

Dostonbek Oripjonov

1,6941 gold badge21 silver badges30 bronze badges

Comments

Arvind yadav · Accepted Answer · 2019-09-27 06:54:00Z

0

If your ClassRoom component is functional component, then use this.

<ClassRoom students={students}/>

 function ClassRoom(props) {
    render() {
        return (
            <div>
                {props.students}
            </div>
        )
    }
}

export default ClassRoom;

In functional component use props.students and in class component use this.props.students

answered Sep 27, 2019 at 6:54

Arvind yadav

10510 bronze badges

Collectives™ on Stack Overflow

How to pass Array from Parent component to Child component in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related