hey guys iam trying to create my reacte app an i i have aproblem i dont where i can fix itstrong text
i wrote this code but its not return a data to me and i don’t know where the problem please help
using ccreate a reacct app
hey guys iam trying to create my reacte app an i i have aproblem i dont where i can fix itstrong text
i wrote this code but its not return a data to me and i don’t know where the problem please help
using ccreate a reacct app
//this my app.j s
import Employees from "./Components/Employees";
import "bootstrap/d ist/css/bootstrap.min.css";
export default function App() {
return (
<div
<Employees/>
</div>
);
}
// this my Employee. j s x
import React, { useEffect, useState } from "react";
import axios from "axios";
function Employee(props) {
const [employeeData, setEmployeeData] = useState(null);
useEffect(
function(){
a x i o s
.get(`http://statenweb.mockable.io/employee/${props.selectedEmployee}`) // this is the data
.then(function(response){
setEmployeeData(response.data);
});
},
[props.selectedEmployee]
);
if (!employeeData){
return <p> loading....</p>;
}
return(
<div>
<img
style={{ maxHeight: "300px"}}
src={employeeData.photo}
alt={employeeData.name}
/>
<p>{employeeData.name}</p>
</div>
)
}
export default Employee;
// this my Employees.j s x
import a x i os from "ax i os";
import React,{useEffect, useState} from "react";
//import Employee from "./Employee";
function Employees(){
const [employees, setEmployees] = useState([]);
const [selectedEmployee, setSelectedEmployee] = useState(null);
function getAllEmployees(){
ax i o s . g et("https://statenweb.mockable.io/employees").then(function(response){
setEmployees(response.data);
});
}
if (selectedEmployee){
return(
<div>
<p>you selected a {selectedEmployee}</p>
<button onClick={() => setSelectedEmployee(null)}>Reset</button>
</div>
);
}
return(
<div>
<button onClick={getAllEmployees}>get all the employees</button>
{employees.map(function(employee){
return(
<p key={employee.id}>
<button onClick={() => setSelectedEmployee(employee.department)}>
my name is {employee.name}- ID: {employee.id}
</button>
</p>
);
})}
</div>
);
}
export default Employees ;