Tenho o seguinte componente que monta tabs na página:
// * Components
// * Natives
import { useState } from 'react';
// * Render
export default function Accordeon(props){
const data = props.data;
// * Set States
const [isExpanded, setIsExpanded] = useState(null);
const toggleExpanded = (id) => () => setIsExpanded((isExpanded) => (isExpanded === id ? null : id));
// * Render
return (
<div>
<ul>
{props.data.map((data, index) => {
return (
<li key={index} isexpanded={isExpanded === data.id}>
<a onClick={toggleExpanded(data.id)}>{data.title}</a>
</li>
)
})}
</ul>
<div>
{props.data.map((data, index) => {
return (
<div key={index} className={(isExpanded === data.id ? '' : 'hidden') + ''}>
data.description
</div>
)
})}
</div>
</div>
)
}
Ele recebe um objeto como props, e através dele, executo um map e a montagem acontece. Um exemplo de map:
const accordeonData = [
{
'id': 1,
'title': 'Teste',
'description': 'Conteudo 01',
'active': true
},
{
'id': 2,
'title': 'Teste 2',
'description': 'Conteudo 02'
}
];
Eu crio um estado com valor null, e quando eu clico para exibir uma das tabs, o estado recebe o valor do ID.
Porém, estou tentando passar um default, para que sempre tenhamos um em aberto. Já tentei trocar o null pelo ID que tem o parametro "active", sem sucesso.
Já tentei disparar o toggleExpanded() quando data.active === true
, também sem sucesso (neste caso, ele ainda diz que o react entra num loop e para a execução).
Ex:
props.data.map((data) => {
if(data.active === true){
setIsExpanded(data.id);
}
})
Como posso adaptar meu código para que seja possível ter um aberto por default, ou seja, quando no map, passar por um objeto que tenha active: true, ou o toggleExpanded seja disparado, liberando o ID para visualização, ou de qualquer outra maneira viável?
Estou empacado nesta.