So I'm not quit sure how to make myself clear on this question since I'm not the best at english. But okay here's my problem: I have divs with their personal info like url, title etc. When I click the info button I want to show more info for that specific element, but instead I get the same info in every div. Let me show my code to make it more clear.
import React from 'react';
import {useKeycloak} from "@react-keycloak/web";
const ProjectInfo = ({getProjectInfo}) => {
const {keycloak} = useKeycloak()
return (
<div>
{getProjectInfo.title}
</div>
);
};
export default ProjectInfo;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import React, {useCallback, useEffect, useState} from 'react';
import {useKeycloak} from "@react-keycloak/web";
import ProjectInfo from "./ProjectInfo";
import {useNavigate} from "react-router-dom";
const ProjectPage = () => {
const {keycloak} = useKeycloak()
const navigate = useNavigate();
const [projectsList, setProjectsList] = useState([
{projectId: "",projectUrl: "", description: '', projectTypes: "", title: ''}
])
const [project, setProject] = useState(
{projectId: "",projectUrl: "", description: '', projectTypes: "", title: ''}
)
const getProjectInfo = (id) => {
let res = fetch('http://localhost:8080/api/v1/user/get-one-project/' + id , {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + keycloak.token,
'content-type': 'application/json'
},
}).then(res => res.json())
.then(response => {
setProject(response)
});
if(res.status === 201) {
navigate("/project-info")
}
}
useEffect(() => {
fetch(`http://localhost:8080/api/v1/user/users-projects/` + keycloak.tokenParsed.sub, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + keycloak.token,
'content-type': 'application/json'
},
}).then(res => res.json())
.then(data =>{
setProjectsList(data)
console.log(data)
})
}, []);
return (
<div>
{
projectsList.map((p,index) => (
<ol key={index}>
<div className="max-w-sm rounded overflow-hidden shadow-lg mx-auto">
<div className="px-6 py-4">
<div>
{p.projectUrl}
</div>
<div>
{p.title}
</div>
<div>{p.projectId}</div>
<div className="font-bold text-xl mb-2">
<button onClick={() =>
getProjectInfo(p.projectId, index)}>info</button>
</div>
<p className="text-gray-700 text-base">
<div>
<ProjectInfo getProjectInfo={project}/>
</div>
</p></div>
<div className="px-6 pt-4 pb-2"><span
className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span
className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span><span
className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
</div>
</div>
</ol>
))
}
</div>
);
};
export default ProjectPage;