// src/components/Home.js
import React from ‘react’;
const Home = () =>
Home – Welcome to our website!
;
export default Hom
e;
// src/components/Images.js
import React from ‘react’;
import { useSelector, useDispatch } from ‘react-redux’;
import { setSelectedImage } from ‘../actions/actions’;
const Images = () => {
// Redux state and dispatch
const selectedImage = useSelector(state => state.selectedImage);
const dispatch = useDispatch();
// Map of images for each button
const imageMap = {
insights: 'insights-image.jpg',
services: 'services-image.jpg',
internet: 'internet-image.jpg',
solutions: 'solutions-image.jpg',
};
return (
<div>
{selectedImage ? (
<img src={selectedImage} alt="Selected" />
) : (
<h2>Select an option to view the corresponding image.</h2>
)}
<div>
{Object.keys(imageMap).map(key => (
<button key={key} onClick={() => dispatch(setSelectedImage(imageMap[key]))}>
{key}
</button>
))}
</div>
</div>
);
};
export const setSelectedImage = (image) => ({
type: ‘SET_SELECTED_IMAGE’,
payload: image,
const initialState = {
selectedImage: null,
};
const imageReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_SELECTED_IMAGE':
return {
...state,
selectedImage: action.payload,
};
default:
return state;
}
};
import { createStore } from ‘redux’;
import imageReducer from ‘../reducers/reducers’;
const store = createStore(imageReducer);
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import { Provider } from ‘react-redux’;
import store from ‘./store/store’;
import Home from ‘./components/Home’;
import Images from ‘./components/Images’;
const App = () => (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/images">Images</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/images" component={Images} />
</Switch>
</div>
</Router>
);
export default App;
Just need Css for the above