How to map on react JS with button? - css

Question

currently I'm trying to create a react app. I have 3 button and I want to show different information and image depending on the button chosen. It will only display the info of the chosen button for example, if user click de'spa it will only show information about id 1.
How can I map each of them with mapping in react? and one more question. Can I directly write the path for my img in the array ? if can't, how to do it ?
Here's the current code I have
import {Carousel, Container, Row, Col} from 'react-bootstrap'
import '../CSS/Facilities.css'
const facsInfo = [
{
Id: "1",
Title: "De'Spa",
Description: "",
upperleftimg:"./Images/photo1.png",
upperrightimg:"./Images/photo2.png",
},
{
Id: "2",
Title: "De'Resto",
Description: "",
upperleftimg:"./Images/photo3.png",
upperrightimg:"./Images/photo4.png",
},
]
const Facilities = () => {
return (
<>
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<button className="facsButton">De'Spa</button>
</Col>
<Col sm={4} lg={4}>
<button className="facsButton">De'Resto</button>
</Col>
<Col sm={4} lg={4}>
<button className="facsButton">Meeting Room</button>
</Col>
</Row>
</Container>
<Container fluid>
<Row className="text-center">
<Col md={12} lg={12}>
{facsInfo.map((show) =>{
const {Title, Description, OpeningHours, Id} = show
return(
<div key={Id}>
<h1>{Title}</h1>
<h5>{Description}</h5>
</div>
)
})}
</Col>
</Row>
</Container>
<Container fluid>
<Row>
<Col md={12} lg={12}>
{facsInfo.map((show) =>{
const {upperleftimg, upperrightimg, Id} = show
return(
<div key={Id} className="FacilitiesImg">
<img src={upperleftimg} alt="Image 1"></img>
<img src={upperrightimg} alt="Image 2"></img>
</div>
)
})}
</Col>
</Row>
</Container>
</>
)
}
export default Facilities

Answer 1

You could use a state to do that
In your Facilities component:
const [id, setID] = useState('');
Then in your buttons:
<Row className="facsbuttwrapper text-center">
{facsInfo.map(fac => (
<Col sm={4} lg={4}>
<button className="facsButton" onClick={() => setId(fac.Id)}>
{fac.Title}
</button>
</Col>
))}
<Col sm={4} lg={4}>
<button className="facsButton">Meeting Room</button>
</Col>
</Row>;
To show correct image:
<Row>
<Col md={12} lg={12}>
{facsInfo.find(show => {
if (show.id === id) {
const { upperleftimg, upperrightimg, Id } = show;
return (
<div key={Id} className="FacilitiesImg">
<img src={upperleftimg} alt="Image 1"></img>
<img src={upperrightimg} alt="Image 2"></img>
</div>
);
}
})}
</Col>
</Row>;

Answer 2

Add onClick events on your buttons and pass the ID into the click handler.
Set a State with selected id.
Instead of using facsInfo.map, use facsInfo.find(f => f.id === selectedID) [selectedID being the state].

Answer 3

You need a state to save information.
filter facsInfo based on current information state
const [current, setCurrent] = React.useState(`De'Spa`)
const handleInfoChange = (evt) => {
setCurrent(evt.currentTarget.dataset.info)
}
const filteredFacsInfo = facsInfo.filter(x => x.Title === current)
return (
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<button data-info="De'Spa" className="facsButton" onClick={handleInfoChange}>De'Spa</button>
</Col>
<Col sm={4} lg={4}>
<button data-info="De'Resto" className="facsButton" onClick={handleInfoChange}>De'Resto</button>
</Col>
<Col sm={4} lg={4}>
<button data-info="Meeting Room" className="facsButton" onClick={handleInfoChange}>Meeting Room</button>
</Col>
</Row>
</Container>
<Container fluid>
<Row className="text-center">
<Col md={12} lg={12}>
{filteredFacsInfo.map((show) => /* your render content about info */)}
</Col>
</Row>
</Container>
<Container fluid>
<Row className="text-center">
<Col md={12} lg={12}>
{filteredFacsInfo.map((show) => /* your render content about image */)}
</Col>
</Row>
</Container>
)

Answer 4

and one more question. Can I directly write the path for my img in the array ? if can't, how to do it ?
Yes, you can.
For achieving your aim, you need to define a state:
const [currentId, setCurrentId] = useState();
And a function which will filter facs:
const showSelectedFact = () => {
var fac = facsInfo.filter((x) => x.Id == currentId)[0];
const { Title, Description, OpeningHours, Id } = fac;
return (
<div key={Id}>
<h1>{Title}</h1>
<h5>{Description}</h5>
</div>
);
};
Here's the code:
import { Carousel, Container, Row, Col } from "react-bootstrap";
import { useEffect, useState } from "react";
// import '../CSS/Facilities.css'
const facsInfo = [
{
Id: "1",
Title: "De'Spa",
Description: "",
upperleftimg: "./Images/photo1.png",
upperrightimg: "./Images/photo2.png"
},
{
Id: "2",
Title: "De'Resto",
Description: "",
upperleftimg: "./Images/photo3.png",
upperrightimg: "./Images/photo4.png"
},
{
Id: "3",
Title: "Meeting Room",
Description: "",
upperleftimg: "./Images/photo3.png",
upperrightimg: "./Images/photo4.png"
}
];
const Facilities = () => {
const [currentId, setCurrentId] = useState();
useEffect(() => {
console.log(currentId);
}, [currentId]);
const showSelectedFact = () => {
var fac = facsInfo.filter((x) => x.Id == currentId)[0];
const { Title, Description, OpeningHours, Id } = fac;
return (
<div key={Id}>
<h1>{Title}</h1>
<h5>{Description}</h5>
</div>
);
};
return (
<>
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<button
value="1"
className="facsButton"
onClick={(e) => setCurrentId(e.target.value)}
>
De'Spa
</button>
</Col>
<Col sm={4} lg={4}>
<button
value="2"
className="facsButton"
onClick={(e) => setCurrentId(e.target.value)}
>
De'Resto
</button>
</Col>
<Col sm={4} lg={4}>
<button
value="3"
className="facsButton"
onClick={(e) => setCurrentId(e.target.value)}
>
Meeting Room
</button>
</Col>
</Row>
</Container>
<Container fluid>
<Row className="text-center">
<Col md={12} lg={12}>
{showSelectedFact()}
</Col>
</Row>
</Container>
<Container fluid>
<Row>
<Col md={12} lg={12}>
{facsInfo.map((show) => {
const { upperleftimg, upperrightimg, Id } = show;
return (
<div key={Id} className="FacilitiesImg">
<img src={upperleftimg} alt="Image 1"></img>
<img src={upperrightimg} alt="Image 2"></img>
</div>
);
})}
</Col>
</Row>
</Container>
</>
);
};
export default function App() {
return <Facilities />;
}