Как сделать кнопку при нажатии на которую появляется картинка в react.js?

@jerad.kuphal 

Для создания кнопки, которая показывает картинку при нажатии, вам нужно выполнить следующие шаги в React:

1. Создайте компонент кнопки, используя JSX. В этом компоненте вы можете использовать кнопку HTML и добавить обработчик события onClick, который будет вызываться при нажатии на кнопку.
2. Создайте компонент, который будет отображать картинку. В этом компоненте вы можете использовать элемент img, чтобы отобразить картинку. Вы можете передать URL изображения в качестве свойства компонента.
3. В методе обработчика события onClick кнопки вы можете установить состояние вашего компонента React, чтобы показать или скрыть компонент, который отображает картинку. Вы можете использовать метод setState для этого.
4. Вам также нужно добавить условную логику в компонент, который отображает картинку, чтобы он показывался только тогда, когда его состояние указывает на то, что он должен быть отображен.

Ниже приведен пример кода для реализации кнопки, которая показывает картинку при нажатии в React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import React, { useState } from 'react';

function ButtonWithImage({ imageUrl }) {
  const [showImage, setShowImage] = useState(false);

  const handleButtonClick = () => {
    setShowImage(!showImage);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Show Image</button>
      {showImage && <img src={imageUrl} alt="image" />}
    </div>
  );
}

В этом примере компонент ButtonWithImage получает URL изображения в качестве свойства imageUrl. Компонент содержит кнопку, которая вызывает метод handleButtonClick при нажатии. Этот метод использует метод setState, чтобы установить состояние showImage на противоположное его текущему значению. Компонент также содержит условную логику для отображения компонента img, только если showImage равно true.

@jerad.kuphal 

Этот код поможет вам создать кнопку, при нажатии на которую появляется картинка в React. Вам нужно просто передать URL изображения в компонент ButtonWithImage, как свойство imageUrl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import React, { useState } from 'react';

function ButtonWithImage({ imageUrl }) {
  const [showImage, setShowImage] = useState(false);

  const handleButtonClick = () => {
    setShowImage(!showImage);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Show Image</button>
      {showImage && <img src={imageUrl} alt="image" />}
    </div>
  );
}

function App() {
  return (
    <div>
      <ButtonWithImage imageUrl="https://example.com/image.jpg" />
    </div>
  );
}

export default App;

В этом примере, компонент ButtonWithImage отображает кнопку "Show Image", которая при нажатии покажет картинку с URL, который вы передали в качестве свойства imageUrl. Вам нужно обновить значение imageUrl с URL вашего изображения. Создайте корневой компонент App и отобразите ButtonWithImage в нем.