Intento hacer una galeria dinamica no logro que refresque la galeria como tal registro los cambios en la interfaz de seleccion y modifico el state donde tengo las imganes y la propiedad de view y en el primer run si oculta o muestra lo que por defecto ponga en visible = true sin embargo cuando cambio la categoria o galeria seleccionada si cambia mi stado catImagenes pero no se refresca el let galery :( solo ocupo que se renderize ese elemennto cada que cambie mi categoria seleccionada
import React, {useState, useEffect} from "react";
import axios from "axios";
import { Row, Col, CardGroup, Card } from 'react-bootstrap'
import './styles.css'
const BancoDeImagenes = () => {
// Contexto de obra para saber que obra esta seleccionada
const selectedObra =( isNaN( parseInt(window.localStorage.getItem("selectedObra")))) ? 1 : parseInt(window.localStorage.getItem("selectedObra"));
const [ oobras, setOobras ] = useState()
const [ residente, setResidente ] = useState()
const [ categoriasImagen, setCategoriasImagen ] = useState()
const [ catImagenes, setCatImagenes ] = useState()
useEffect(async () => {
getCategoriasImagen()
fillGelery()
await getOObras()
}, [])
useEffect( async () => {
getCategoriasImagen()
fillGelery()
await getResponsables( )
},[oobras,selectedObra])
const getOObras = async () =>{
const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/oobra')
if (res.status ===200){
const obra = res.data.filter( obra => obra.idobra === selectedObra )
await setOobras( obra )
}
}
const getResponsables = async () =>{
const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/responsable')
if (oobras && res.status ===200){
const getResidente = await res.data.filter( resi => resi.idResponsable === oobras[0].idResidente)
setResidente(getResidente)
}
}
const getCategoriasImagen = async () =>{
const res = await axios.get( process.env.REACT_APP_BACK_ATISA_ROUTE + 'api/categoriasimagen')
if (res.status ===200){
const getCI = await res.data.filter( ci => ci.idobra === selectedObra)
setCategoriasImagen(getCI)
}
}
const fillGelery = () => {
let galery = []
if(categoriasImagen){
categoriasImagen.forEach( cat => {
galery.push({
categoria : cat.nombre,
visible : false,
imagenes : [
{ key : 1, img : cat.imagen1, text : cat.texto1},
{ key : 2, img : cat.imagen2, text : cat.texto2},
{ key : 3, img : cat.imagen3, text : cat.texto3},
{ key : 4, img : cat.imagen4, text : cat.texto4},
{ key : 5, img : cat.imagen5, text : cat.texto5},
{ key : 6, img : cat.imagen6, text : cat.texto6}
]
})
});
if (galery.length > 0){
galery[0].visible = true
}
setCatImagenes(galery) }
}
const onChangeCategoriasHelper = (e) => {
catImagenes.map( (currentValue) => { currentValue.visible = ( currentValue.categoria === e.target.value ) ? true : false })
}
let galery = <CardGroup>
{catImagenes && catImagenes.map( categoria => {
return(
<div>
{
<Row xs={1} md={3} className="g-4">
{categoria.imagenes.map(img => (
<Col>
<Card>
<Card.Img variant="top" src={img.img} />
<Card.Body>
<Card.Text>
{img.text}
</Card.Text>
</Card.Body>
</Card>
</Col>
))}
</Row>
}
</div>
)
})}
</CardGroup>
return (
<div>
<Row className = "row row-header-general" >
<Col className = "col col-header-general" >
<section>
Residente : <b>{residente && residente[0].nombre}</b>
</section>
<section>
Reporte NO.:
</section>
</Col>
<Col className = {"col col-header-general"} >
<section>
Semanas Transcurridas:
</section>
</Col>
<Col>
<section>
Periodo:
</section>
</Col>
</Row>
<Row className = "header" >
BITÁCORA FOTOGRÁFICA
</Row>
<Row>
<Col sm = {10}>
{galery}
</Col>
<Col className = "menu-galery" sm = {2} onChange = { onChangeCategoriasHelper }>
<b>BITÁCORA FOTOGRÁFICA</b>
{catImagenes && catImagenes.map( (categoria, index ) => {
return(
<div>
<input type="radio" id={categoria.categoria} name="categorias" value={categoria.categoria}/>
{categoria.categoria}
</div>
)
} )}
</Col>
</Row>
</div>
)}
export default BancoDeImagenes
Ese es el codigo que tengo igual este es el gist