How can I bind a toggle to the clicked element to mapped data in react
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
3
I'm using reactstrap/bootstrap for an accordion functionality. I'm having trouble with my toggling and onclick. My state, function and render look like the following:
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: false,
activeTab: 'capabilities',
};
toggle = active =>
this.setState({
collapse: !this.state.collapse,
active: !this.state.active,
});
const specsCatsR = this.props.specs.map((item, i) => {
return (
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle.bind(this)}
>
{' '}
{item.category}{' '}
</h5>
<Collapse isOpen={this.state.active}>
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
});
It spits out a list of items. However, when I click on one item, they all open/toggle. How can I bind it to only open the one that is clicked?
reactjs react-native
asked Jan 4 at 9:25
Lz430Lz430
708
add a comment |
3
I'm using reactstrap/bootstrap for an accordion functionality. I'm having trouble with my toggling and onclick. My state, function and render look like the following:
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: false,
activeTab: 'capabilities',
};
toggle = active =>
this.setState({
collapse: !this.state.collapse,
active: !this.state.active,
});
const specsCatsR = this.props.specs.map((item, i) => {
return (
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle.bind(this)}
>
{' '}
{item.category}{' '}
</h5>
<Collapse isOpen={this.state.active}>
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
});
It spits out a list of items. However, when I click on one item, they all open/toggle. How can I bind it to only open the one that is clicked?
reactjs react-native
asked Jan 4 at 9:25
Lz430Lz430
708
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
What check do you mean?
– codecubed.io
Jan 4 at 9:42
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44
add a comment |
3
3
3
I'm using reactstrap/bootstrap for an accordion functionality. I'm having trouble with my toggling and onclick. My state, function and render look like the following:
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: false,
activeTab: 'capabilities',
};
toggle = active =>
this.setState({
collapse: !this.state.collapse,
active: !this.state.active,
});
const specsCatsR = this.props.specs.map((item, i) => {
return (
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle.bind(this)}
>
{' '}
{item.category}{' '}
</h5>
<Collapse isOpen={this.state.active}>
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
});
It spits out a list of items. However, when I click on one item, they all open/toggle. How can I bind it to only open the one that is clicked?
reactjs react-native
asked Jan 4 at 9:25
Lz430Lz430
708
I'm using reactstrap/bootstrap for an accordion functionality. I'm having trouble with my toggling and onclick. My state, function and render look like the following:
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: false,
activeTab: 'capabilities',
};
toggle = active =>
this.setState({
collapse: !this.state.collapse,
active: !this.state.active,
});
const specsCatsR = this.props.specs.map((item, i) => {
return (
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle.bind(this)}
>
{' '}
{item.category}{' '}
</h5>
<Collapse isOpen={this.state.active}>
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
});
It spits out a list of items. However, when I click on one item, they all open/toggle. How can I bind it to only open the one that is clicked?
reactjs react-native
reactjs react-native
asked Jan 4 at 9:25
Lz430Lz430
708
asked Jan 4 at 9:25
Lz430Lz430
708
asked Jan 4 at 9:25
Lz430Lz430
708
asked Jan 4 at 9:25
Lz430Lz430
708
asked Jan 4 at 9:25
Lz430Lz430
708
708
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
What check do you mean?
– codecubed.io
Jan 4 at 9:42
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44
add a comment |
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
What check do you mean?
– codecubed.io
Jan 4 at 9:42
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
What check do you mean?
– codecubed.io
Jan 4 at 9:42
What check do you mean?
– codecubed.io
Jan 4 at 9:42
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44
add a comment |
1 Answer
1
active
oldest
votes
2
If only one of your elements is supposed to be expanded at a time, I recommend storing the id of the currently expanded item in your state (here in active).
The toggle function will receive the id of the clicked element and then the onClick event arguments by preconfiguring it :
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: null, //Active is not a boolean anymore
activeTab: 'capabilities',
};
toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
this.setState({
collapse: !this.state.collapse,
active: id,
});
}
const specsCatsR = this.props.specs.map((item, i) =>
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
>
{` ${item.category} `}
</h5>
<Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036117%2fhow-can-i-bind-a-toggle-to-the-clicked-element-to-mapped-data-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
If only one of your elements is supposed to be expanded at a time, I recommend storing the id of the currently expanded item in your state (here in active).
The toggle function will receive the id of the clicked element and then the onClick event arguments by preconfiguring it :
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: null, //Active is not a boolean anymore
activeTab: 'capabilities',
};
toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
this.setState({
collapse: !this.state.collapse,
active: id,
});
}
const specsCatsR = this.props.specs.map((item, i) =>
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
>
{` ${item.category} `}
</h5>
<Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
add a comment |
2
If only one of your elements is supposed to be expanded at a time, I recommend storing the id of the currently expanded item in your state (here in active).
The toggle function will receive the id of the clicked element and then the onClick event arguments by preconfiguring it :
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: null, //Active is not a boolean anymore
activeTab: 'capabilities',
};
toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
this.setState({
collapse: !this.state.collapse,
active: id,
});
}
const specsCatsR = this.props.specs.map((item, i) =>
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
>
{` ${item.category} `}
</h5>
<Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
add a comment |
2
2
2
If only one of your elements is supposed to be expanded at a time, I recommend storing the id of the currently expanded item in your state (here in active).
The toggle function will receive the id of the clicked element and then the onClick event arguments by preconfiguring it :
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: null, //Active is not a boolean anymore
activeTab: 'capabilities',
};
toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
this.setState({
collapse: !this.state.collapse,
active: id,
});
}
const specsCatsR = this.props.specs.map((item, i) =>
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
>
{` ${item.category} `}
</h5>
<Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
If only one of your elements is supposed to be expanded at a time, I recommend storing the id of the currently expanded item in your state (here in active).
The toggle function will receive the id of the clicked element and then the onClick event arguments by preconfiguring it :
state = {
basicFeatures: ,
fuelEconomy: {},
upholsteryType: null,
category: 'Engine',
collapse: false,
active: null, //Active is not a boolean anymore
activeTab: 'capabilities',
};
toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
this.setState({
collapse: !this.state.collapse,
active: id,
});
}
const specsCatsR = this.props.specs.map((item, i) =>
<React.Fragment>
<Col xs="12" key={i} className="border-bottom p-15">
<FontAwesomeIcon
icon={
this.state.active ? faMinusCircle : faPlusCircle
}
/>
<h5
className="collapse-header"
onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
>
{` ${item.category} `}
</h5>
<Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
<SpecsDetails
vehicle={this.props.vehicle}
values={item.values}
category={item.category}
/>
</Collapse>
</Col>
</React.Fragment>
);
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
answered Jan 4 at 9:45
TreycosTreycos
4,53331433
4,53331433
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
add a comment |
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
That's perfect! Thank you.
– Lz430
Jan 4 at 9:48
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036117%2fhow-can-i-bind-a-toggle-to-the-clicked-element-to-mapped-data-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
pass the id of the element on onClick and check this in the handler then toggle it accordingly.
– Vikas Singh
Jan 4 at 9:28
Can you give me a quick example please? I know how to pass it, but the check is what i'm having trouble with. Still learning react.
– Lz430
Jan 4 at 9:30
What check do you mean?
– codecubed.io
Jan 4 at 9:42
How do I check the id in my toggle function?
– Lz430
Jan 4 at 9:44