désolé pour mon code ci-haut, j’avais utiliser mon téléphone. je viens de creer une App react + node js et mysql.
dans mysql je lier deux tables avec la methode JOIN.
mon probleme est que en cliquant je n’arrive pas a afficher les information lier a un id,
dans le premier composant j’ai réussis récupérer l’id:
const Travailleurs = () => {
const [data, setData] = useState([]);
const getUserData = async () => {
const res = await axios.get("http://localhost:5000/getentr", {
headers: {
"Content-Type": "application/json"
}
});
if (res.data.status == 201) {
console.log("data get");
setData(res.data.data)
} else {
console.log("error")
}
}
useEffect(() => {
getUserData()
}, [])
return (
<div className='container mt-2 couleur'>
<h1 className='text-center mt-2'>Liste de travailleurs</h1>
<div className='text-center mt-5 mb-5 pb-5'>
<button className=' n btn btn-primary'>Ajouter</button>
</div>
<div className='d-flex justify-content-between align-iteams-center mt-5 '>
{
data.length > 0 ? data.map((el, i) => {
return (
<>
<Card key={i} style={{ width: '22rem', height: "20rem" }} className="mb-3 mx-3">
<Card.Img variant="top" src={`http://localhost:5000/uploads/${el.img_entr}`} style={{ width: '100px', textAlign: "center", margin: "auto" }} className="mt-2" />
<Card.Body className='text-center'>
<Card.Title>UserName : {el.name}</Card.Title>
<Card.Text>
Date Added : {moment(el.date).format("DD-MM-YYYY")}
</Card.Text>
<Link to={`/readentr/${el.id} `} variant="danger" className='col-lg-6 text-center'>Read</Link>
</Card.Body>
</Card>
</>
)
}) : ""
}
</div>
</div>
)
}
dans le second composant je voulais afficher :
function Readentr() {
const [data, setData] = useState([]);
const {id} = useParams();
const getUserData = async () => {
const res = await axios.get('http://localhost:5000/readentr/'+id, {
headers: {
"Content-Type": "application/json"
}
});
if (res.data.status == 201) {
console.log("data get");
setData(res.data.data)
} else {
console.log("error")
}
}
useEffect(() => {
getUserData()
}, [])
return (
<div className='container mt-2 couleur'>
<h1 className='text-center mt-2'>Liste de travailleurs</h1>
<div className='text-center mt-5 mb-5 pb-5'>
<button className=' n btn btn-primary'>Ajouter</button>
</div>
<div className='d-flex justify-content-between align-iteams-center mt-5 '>
{
data.length > 0 ? data.map((el, i) => {
return (
<>
<Card key={i} style={{ width: '22rem', height: "20rem" }} className="mb-3 mx-3">
<Card.Img variant="top" src="" style={{ width: '100px', textAlign: "center", margin: "auto" }} className="mt-2" />
<Card.Body className='text-center'>
<Card.Title>UserName : {el.travailleursName}</Card.Title>
<Card.Text>
</Card.Text>
</Card.Body>
</Card>
</>
)
}) : ""
}
</div>
</div>
)
}
mon code sql
router.get("/readentr/:id", (req, res) => {
const id = req.params.id;
try {
conn.query("SELECT travailleurs.id ,travailleurs.name as travailleursName,entreprises.id ,entreprises.name as entreprisesName FROM travailleurs JOIN entreprises ON (entreprises.id = travailleurs.entr_id) WHERE entreprises.id = ?",[id] ,(err, result) => {
if (err) {
console.log("error")
} else {
console.log("data get")
res.status(201).json({ status: 201, data: result })
}
})
} catch (error) {
res.status(422).json({ status: 422, error })
}
})
+0
-0
