Passing props from parent component to child components

Obin Charity

HI am trying to pass some data to my child component (actually data from data base). In my parent component when i console.log it i can see my data but i want to display this in my child component and it gives me an error any suggestions pls? Here is my code

This is not the complete code for parent but i think this is what you need to see

MY parent component

import React, { useState, useEffect } from "react";
import './Inscription.css';
import Axios from 'axios';
import Adherents from "./Adherents";

function Inscription (){
   
   const [Nom, setNom] = useState("");
   const [Email, setEmail] = useState("");
   const [Profession, setProfession] = useState("");
   const [Date_naiss, setDate_naiss] = useState(0);
   const [Tel, setTel] = useState(0);
   const [Date_adhession, setDate_adhession] = useState(0);
   const [formData, setformData] = useState("")

   const [Info,getInfo] = useState([])
  
   
   const addAdherent = () =>{

      Axios.post('http://localhost:3005/create',{
        Nom: Nom,
        Email: Email,
        Profession: Profession,
        Date_naiss: Date_naiss,
        Tel: Tel,
        Date_adhession: Date_adhession,
        formData:formData,

      }).then(()=>{
        console.log("success");
      })
    }

    useEffect(() => {
      getAllInfo();
    }, []);


    const getAllInfo = (props) =>{
       Axios.get('http://localhost:3005/adherents')
       .then((response) => {
          console.log(response.data)
         getInfo(response.data)
       })
       .catch(error => console.log("error"))

    }

    return(
        

        <div className= "Inscription">
          <Adherents data={Info}/>  
        </div>

My index.js

const express = require("express");
const app = express();
const mysql = require('mysql2');
const cors = require('cors');

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  user: 'root',
  host: 'localhost',
  password: 'obincharity',
  database: 'adherents_system',
  port: '3306',

});


app.get('/adherents', (req,res) => {
  db.query("SELECT * FROM new_table", (err, result) => {
    if (err){
      console.log(err);
    }else{
      res.send(result);
    }
  });
});
    
app.listen(3005, () =>{
  console.log("server working");
  });

My child component

import React from 'react'

export default function Adherents(props) {
    const getAllInfo  = ()=>{
        const {menu,data} = props;
        if(data.length > 0){
            return(
                data.map((data, index) =>{
                    console.log(data);
                   
                   return(
                    <div className = "Data" key={data.Nom}>
                    <h3 className = "MainName"> {data.Nom} </h3>
                    <h4 className = "MainTel"> {data.Telephone} </h4>
                    <h4 className = "MainEmail"> {data.Email} </h4>
                    <span className="Info_fadeOut"></span>
                    </div>
                   )
                })
                
            )
        }else{
            return(<h3>No notes yet</h3>)
        }
    }
    return(
         
        <>
           {getAllInfo (props)}
        </>
    )
    }

this is the error it shows in my browser

TypeError: Cannot read property 'length' of undefined
getAllInfo
C:/Users/HP/Documents/Mutcav/client/src/Adherents.js:6
  3 | export default function Adherents(props) {
  4 |     const getAllInfo  = ()=>{
  5 |         const {menu,data} = props;
> 6 |         if(data.length > 0){
  7 |             return(
  8 |                 data.map((data, index) =>{
  9 |                     console.log(props);
View compiled
Adherents
C:/Users/HP/Documents/Mutcav/client/src/Adherents.js:28
  25 | }
  26 | return(
  27 |      
> 28 |     <>
     | ^  29 |        {getAllInfo (props)}
  30 |     </>
  31 | )
Amila Senadheera

Issue is initially no data is there. Try below:

if(Array.isArray(data) && data.length > 0){
     ....
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Passing props from parent component to child component on dialog box vue

passing props from parent to child in react class based component

Passing Props to Child component from Parent using cloneElement

Passing function via props from Parent to Child component in React?

Vue parent component props are not passing to child component

Passing child component data to parent using props

passing props form child to parent component in react

Connecting child components to store vs connecting parent component to store and passing down props

React router dom passing data from parent component to child router component does not pass the props.match

How can i initialize state by passing props from parent component to child component in ReactJS?

Passing props from child to parent(without context)

Passing event and props from child to parent in react

Passing Data From Child Component Into Parent Component

Passing data from Parent Component to Child Component

Passing child component class as props to parent component in React

React passing props from const to child component

Passing props to UseEffect hook from Parent component

Passing slots through from Parent to Child Components

Change parent component props/state from child

Pass props from Parent to child component

React: How can you access the class name of a parent component from a child without passing it down as props?

Passing writable store values from parent to child component via props in Svelte

Passing Redux store data as Props from parent1 -> parent2 -> child (OR) call redux store directly in Child component with mapToStateProps?

Is useCallback best way to get props data from child component to parent components?

Passing data from service to Component --> Child Components

How to ensure that parent is passing populated props to a child component in VueJS

passing data from child to parent component in Vue

Error with passing a prop from parent to child component

Passing state from parent component to child function