Name of the clicked image in react

JavaScript
21

I don’t have enough details to know if will work for your particular use.

How do you store the name on the image? Using dataset?
Are all the images rendered at once in the DOM? Or is it been fetched
bit by bit by the user and rendered?

You could just show me a portion of your HTML relating to what you are doing/the images

22

It’s just a small project for me to learn react and still just one page is ready: image Editor.
I will upload the project and enter the id and name. On a page, the user will search the image and click on them to open one of them in the image editor.
now I’m writing the search code:

import React, { Component } from 'react';
//import "./Search.scss";

export class Search extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            image: ''
        };


        this.search = this.search.bind(this);
    }

    // Get initial image
    componentDidMount() {
        this.getImage();
    }

    // Get search value from input box on submit
    search(e) {
        e.preventDefault();
        this.getImage(this.refs.search.value);
    }

    // Set image state to the search value
    getImage(search = 'nature') {
        this.setState({
            image: `https://source.unsplash.com/featured/?${search}`
        });

    }

    render() {
        const divStyle = {
            backgroundImage: `url(${this.state.image})`
        };


        // Set `search__results` bg image to the image url
        return /*#__PURE__*/(
            React.createElement("div", { className: "search" }, /*#__PURE__*/
                React.createElement("form", { onSubmit: this.search }, /*#__PURE__*/
                    React.createElement("input", { className: "search__input", type: "text", placeholder: "search...", ref: "search" })), /*#__PURE__*/

                React.createElement("div", { style: divStyle, className: "search__results" })));



    }
}


//ReactDOM.render( /*#__PURE__*/React.createElement(Search, null), document.getElementById("app"));
23

Thanks a lot for all your help and answers.

24

I wasn’t notified that you replied!

25

I guess you are done writing the code, including the code to solve the problem.