How to map over an array and pass it as props to child component correctly in React?

Question

I have a child component PatientRow which is receiving mapped patients array in props from it’s parent ObsTabel. The odd thing is the PatientRow is never rendered and I can’t find the PatientRow component on React Dev tools either. On the other hand if I just pass the patients array then map it in PatienRow the components gets rendered, however this is not what I want. I want to map the array in ObsTabel & pass it to PatientRow so that the rows are individual component with their own state. Please let me know if you can find my mistakes. Note: ObsTable has a parent component from where it is receiving patient array passed as props. file structure - ParentComponent(with patient array).js>ObsTable.js>PatientRow.js

This doesn’t exist in DOM 

export default class PatientRow extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            disabled: false
        };

    }

    render() {

        const { id, label, name, room, timestamp, observationLevel, roomStatus, patient, index } = this.props;
        console.log(this.props);

        return (
            <tbody>

                <tr key={id} >
                    <td>{label}</td>
                    <td>{name}</td>
                    <td>{observationLevel}</td>
                    <td>{roomStatus}</td>
                    <td>{timestamp} </td>

                    <td>


                        <div>
                            <Button> Awake </Button>
                            <Button>Asleep/Breathing</Button>
                        </div>

                        <Button> View Room </Button>

                        <div>
                            <Button>Awake </Button>
                        </div>

                    </td>
                    <td>
                        <Button>Asleep</Button>
                    </td>
                </tr>
            </tbody>
        );
    }
}

export default class ObsTabel extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {


        return (
            <div>
                <div >
                    <Table bordered striped hover >
                        <thead>
                            <tr>
                                <th>Room</th>
                                <th>Patient Name</th>
                                <th> Obs Level </th>
                                <th>Room Status</th>
                                <th>Obs Due In</th>
                                <th>Patient Location</th>
                                <th>Patient Obs Detail</th>
                                <th>Comment</th>
                            </tr>
                        </thead>

                        {this.props.patients.map((patient, index) => {
                            // console.log(patient); logs each patient 

                            <div key={index}>
                                <PatientRow
                                    name={patient.name}
                                    id={patient.id}
                                    label={patient.label}
                                    room={patient.room}                                            observationLevel={patient.observationLevel}
                                    roomStatus={patient.roomStatus}
                                    timestamp={patient.timestamp}
                                    index={index}           
                                />
                            </div>;
                        })}

                    </Table>
                </div>



            </div>
        );
    }
}

Answer 1

it's because you are not returning anything inside map

return (
   <div key={index}>
     <PatientRow
       name={patient.name}
       id={patient.id}
       label={patient.label}
       room={patient.room}                                            
       observationLevel={patient.observationLevel}
       roomStatus={patient.roomStatus}
       timestamp={patient.timestamp}
       index={index}           
     />
  </div>
 );