У меня есть страница на которой выводятся все картинки из массива в котором сохранены url картинок. На этой странице есть иконка при нажатии на которую открывается модальное окно в котором нужно ввести url картинки, после чего при нажатии на кнопку сохранить введенный url добавляется в массив в котором хранятся все url. Проблема в том, что мне приходится в навбаре нажимать на ссылку которая открывает страницу в которой отображаются эти картинки из массива, чтобы новая картинка появилась на страницу, хотя все должно отображаться сразу же после добавления в массив
Это код страницы на которой выводятся все фотографии:
import React, { useState, useEffect } from 'react'
import './Photos.css'
import { AddPhoto } from '../components/AddPhoto'
export const Photo: React.FC = () => {
const [photos, setPhotos] = useState<string[]>([]);
useEffect(() => {
localStorage.setItem('photos', JSON.stringify(photos))
}, [photos])
useEffect(() => {
const saved = JSON.parse(localStorage.getItem('photos') || '[]')
setPhotos(saved)
}, [])
return (<>
<div className='addPhotoBtn' >
<AddPhoto photos={photos} />
</div>
<div className="gallery" >
{photos.map(item =>
<div className="img-item" >
<img src={item} alt="" className="img" />
</div>
)}
</div>
</>)
}
и код модального окна в которой в качестве props передается сам массив который хранит url
import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import './AddPhoto.css'
type AddPhoto = {
// addPhoto(url: string): void
photos: string[],
}
export const AddPhoto: React.FC<AddPhoto> = ({ photos }) => {
const [input, setInput] = useState<string>('')
const [show, setShow] = useState(false);
// const [file, setFile] = useState<string[]>([]) //сохранение url картинки
const handleClose = () => {
setShow(false);
}
const handleShow = () => setShow(true);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInput(e.target.value);
console.log(input)
}
const UploadFile = () => {
photos.push(input)
// addPhoto(input);
setInput('');
setShow(false);
}
return (<>
<svg onClick={handleShow} id="plus-icon" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" /></svg>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<div className="upload-icon">
<div className="urlContainer">
<input type="text" className="urlInput" onChange={handleChange} />
</div>
</div>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={UploadFile}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>)
}