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 | )
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.
Comments