Im using React and want to do something like this:
Where the blue squares are initially hidden and show-up depending on which Colecao the user picks. So, some Classes with some Colecao inside where each one of them has "squares". This is my app.js:
class App extends Component {
constructor(props) {
super(props);
this.state = {
activeTab: 'Classe 1',
tabs: [
{
tituloTab: 'Classe 1',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
}]
},
{
tituloTab: 'Classe 2',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
}]
},
{
tituloTab: 'Classe 3',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
'Colecao 3': [
'A', 'B', 'C'
],
}]
},
{
tituloTab: 'Classe 4',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
'Colecao 3': [
'A', 'B', 'C'
],
'Colecao 4': [
'A', 'B', 'C', 'D', 'E', 'F'
],
}],
}
],
ThumbnailsColecoes: [
{
tituloThumbnail: 'Costas',
texturas: ['A', 'B', 'C', 'D'],
}
],
colecaoSelecionada:
'',
toggleThumbnailsColecoes:
false,
};
}
changeActiveTab(tab) {
this.setState({activeTab: tab});
}
activeTabContent() {
const activeIndex = this.state.tabs.findIndex((tab) => {
return tab.tituloTab === this.state.activeTab;
}
);
return this.state.tabs[activeIndex].colecoes;
}
adicionarColecaoSelecionada(colecao) {
this.setState({colecoesSelecionadas: colecao}, () => {
this.setState({toggleThumbnailsColecoes: true})
}
)
}
render() {
return (
<div className={"container is-fluid"}>
<TabsArea
activeTab={this.state.activeTab}
tabList={this.state.tabs}
changeActiveTab={this.changeActiveTab.bind(this)}
colecoes={this.activeTabContent()}
addColecao={this.adicionarColecaoSelecionada.bind(this)}
colecoesThumbnails={this.state.ThumbnailsColecoes}
toggleThumbnails={this.state.toggleThumbnailsColecoes}/>
</Options>
</section>
</div>
);
}
}
export default App;
My tabsArea.js
class TabsArea extends Component {
render() {
return (
<div className={["section", "tabsArea"].join(' ')}>
<TabsHeader
activeTab={this.props.activeTab}
tabList={this.props.tabList}
changeActiveTab={this.props.changeActiveTab}
/>
<TabContent
key={this.props.activeTab}
colecoes={this.props.colecoes}
addColecao={this.props.addColecao}/>
<hr/>
{//should get the Thumbnails for each "Colecao"
this.props.toggleThumbnails
? <ThumbnailAreas
thumbnailAreas={this.props.colecoesThumbnails}>
</ThumbnailAreas>
: null
}
</div>
)
}
}
export default TabsArea;
tabContent.js
class TabContent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ul className={"uList"}>
{this.props.colecoes.map((list) => {
return <li className={"li"}>
<a className={"has-text-black"}
onClick={() => this.props.addColecao(list)}>
{list} //should get the list of "Colecao"
</a>
</li>
}
)}
</ul>
</div>
)
}
}
export default TabContent;
titulo Tab is like my TabHeader, colecoes are each one of the list items and the array of letters should correspond to each one of the squares. The problem is that my tabs element is an object and I'm not sure how to pass it to an array. Also, where should I do it, in my app.js and pass the array as props or pass the object and convert into array on my component.
Thanks
