score:0
export function mycomponent() {
const images = [
{
image: 'http://www.example1.com/image1.jpg',
title: 'title 1',
},
{
image: 'http://www.example2.com/image2.jpg',
title: 'title 2',
},
{
image: 'http://www.example3.com/image3.jpg',
title: 'title 3',
},
];
const [titles, settitles] = react.usestate([]);
return (
<div>
<div>{titles}</div>
<section classname="images">
{images.map((image) => (
<img
style={{
border: titles.includes(image.title) ? '3px solid black' : 'none',
}}
src={image.image}
alt={image.title}
onclick={() => {
if (titles.includes(image.title)) {
settitles(titles.filter((title) => title !== image.title));
} else settitles([...titles, image.title]);
}}
/>
))}
</section>
</div>
);
}
score:1
i assume that you want to select one image at a time and display the title of it. so, here is a naive approach that you can adapt according to your situation.
const images = [
{ image: "https://via.placeholder.com/150", title: "title 1" },
{ image: "https://via.placeholder.com/150", title: "title 2" },
{ image: "https://via.placeholder.com/150", title: "title 3" },
];
function main() {
const [selected, setselected] = react.usestate();
return (
<div>
<div>{images[selected] && images[selected].title}</div>
<section classname="images">
{images.map((image, index) => (
<img
classname={index === selected ? "selected" : ""}
key={`${index}${image.title}`}
src={image.image}
alt={image.title}
onclick={() => setselected(index)}
/>
))}
</section>
</div>
);
}
reactdom.render(<main />, document.getelementbyid("root"));
.selected {
border: 5px solid black;
}
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />
so, you have one state, the selected index
. for the classname
part you look for the image's index
, compare with the selected
state then assign a class name according to that. for the title part, you are just grabbing the title
by using the selected index
with a conditional jsx.
but, using indices is not reliable. it would be better to have some unique ids for the images.
Source: stackoverflow.com
Related Query
- Selecting images and displaying titles in React
- React & Webpack: Loading and displaying images as background-image
- Best way to handle images and links from a rest api and displaying them in React
- Reading and displaying images from a zip file in react using jszip
- Displaying images and navbar on certain urls react
- how to import images via props in react and use the 'import' path
- How to load background images from css in React and NextJS
- Importing data from excel and displaying in a react component
- Typescript and React (with Gatsby loader): unable to import images as modules
- How can I prevent drag and drop images in a react app?
- How to use images from sharp module in React and Webpack project
- Selecting a Row in React Griddle, and changing tr background color
- how to fetch and display images from database in react app
- Using webpack and url-loader to load inline images in React
- how to map an array of images and use it as inline style in React
- Preloading images and audio with a progress bar in React
- How to position and resize React Bootstrap Tooltip before displaying it on the DOM?
- Creating image and simultaneously displaying its dimensions in React
- Django Rest Framework and React Front End: How to prevent unauthorized users from viewing private images if they get a hold of the image URL?
- Flickr api not fetching images using React and Axios
- saving and displaying array to states in react
- React - fetching and displaying data that is dependent on another fetch
- React and google-maps-react. Not displaying InfoWindow
- Get exact width and height of images in react
- What can cause fonts and images to be downloaded twice when using React with SSR?
- how to get images from mongo with axios and display them with react
- Close menu after selecting an anchor link React and Gatsby
- Favicon not displaying in most browsers and shows odd src path. React + Express Server
- Images not displaying in React App
- React App, How do you map and sort titles in an Api Array in alphabetical order
More Query from same tag
- Trying to apply :focus styling to a nested SVG inside of styled component
- How to handle multiple checkboxes in a React Component
- Attempted import error: 'persistor' is not exported from './redux/store'
- setting variables in a map function
- React table re-renders, losing focus when input text in table cell
- How to get value of Form.Control - React Bootstrap Date Picker?
- How to Import sass file to single components in React
- Delay on array update
- Reactjs : Update value of a component on click
- Dialog with Transition throwing JS warning "findDOMNode is deprecated in StrictMode"
- How to pass updated array object to parent component from child component in reactJs
- How to get tags attribute value in ReactJs?
- (react + express) DOM on server - Return web pages (SSR)
- How should I structure a generic React/Typescript form component whose fields can be passed in as a type?
- Radio button select issue, while using Map function
- How to pass props to child from parent with a map
- how can i set object list in default input value
- Persist cache with apollo-boost
- How to disable a button when the state or the input value gets changed in React JS?
- '<' not recognized when using reactJS in server-side node.js
- Is there a way to use reader.onload return to set my state in react?
- Concurrently setup fix
- Is this the correct way to update the status in react with hook?
- ReactJS + Gulp + Reactify + Browserify Element type is invalid: expected a string but got: undefined
- difference between passing {SomeFunction} and {SomeFunction()} in reactjs event handling
- How can I create react element in another?
- React Hooks must be called in a React function component or a custom React Hook function
- Is it possible to use `ref` for a TextNode?
- Dom node insertion/removal without mutation observers
- React Native: this.setState is not a function