Develop Reference

Expand/Collapse all data

I am making a Accordion and when we click each individual item then its opening or closing well.
Now I have implemented expand all or collapse all option to that to make all the accordions expand/collapse.
Accordion.js
const accordionArray = [
{ heading: "Heading 1", text: "Text for Heading 1" },
{ heading: "Heading 2", text: "Text for Heading 2" },
{ heading: "Heading 3", text: "Text for Heading 3" }
];
.
.
.
{accordionArray.map((item, index) => (
<div key={index}>
<Accordion>
<Heading>
<div className="heading-box">
<h1 className="heading">{item.heading}</h1>
</div>
</Heading>
<Text expandAll={expandAll}>
<p className="text">{item.text}</p>
</Text>
</Accordion>
</div>
))}
And text.js is a file where I am making the action to open any particular content of the accordion and the code as follows,
import React from "react";
class Text extends React.Component {
render() {
return (
<div style={{ ...this.props.style }}>
{this.props.expandAll ? (
<div className={`content open`}>
{this.props.render && this.props.render(this.props.text)}
</div>
) : (
<div className={`content ${this.props.text ? "open" : ""}`}>
{this.props.text ? this.props.children : ""}
{this.props.text
? this.props.render && this.props.render(this.props.text)
: ""}
</div>
)}
</div>
);
}
}
export default Text;
Here via this.props.expandAll I am getting the value whether the expandAll is true or false. If it is true then all accordion will get the class className={`content open`} so all will gets opened.
Problem:
The open class is applied but the inside text content is not rendered.
So this line doesn't work,
{this.props.render && this.props.render(this.props.text)}
Requirement:
If expand all/collapse all button is clicked then all the accordions should gets opened/closed respectively.
This should work irrespective of previously opened/closed accordion.. So if Expand all then it should open all the accordion or else needs to close all accordion even though it was opened/closed previously.
Links:
This is the link of the file https://codesandbox.io/s/react-accordion-forked-sm5fw?file=/src/GetAccordion.js where the props are actually gets passed down.
Edit:
If I use {this.props.children} then every accordion gets opened.. No issues.
But if I open any accordion manually on click over particular item then If i click expand all then its expanded(expected) but If I click back Collapse all option then not all the accordions are closed.. The ones which we opened previously are still in open state.. But expected behavior here is that everything should gets closed.

In your file text.js
at line number 9. please replace the previous code by:
{this.props.children}
Tried in the sandbox and worked for me.
///
cant add a comment so editing the answer itself.
Accordian.js contains your hook expandAll and the heading boolean is already happening GetAccordian.js.
I suggest moving the expand all to GetAccordian.js so that you can control both values.

in this case this.props.render is not a function and this.props.text is undefined, try replacing this line
<div className={`content open`}>
{this.props.render && this.props.render(this.props.text)}
</div>
by this:
<div className={`content open`}>
{this.props.children}
</div>
EDIT: //
Other solution is to pass the expandAll property to the Accordion component
<Accordion expandAll={expandAll}>
<Heading>
<div className="heading-box">
<h1 className="heading">{item.heading}</h1>
</div>
</Heading>
<Text>
<p className="text">{item.text}</p>
</Text>
</Accordion>
then in getAccordion.js
onShow = (i) => {
this.setState({
active: this.props.expandAll ? -1: i,
reserve: this.props.expandAll ? -1: i
});
if (this.state.reserve === i) {
this.setState({
active: -1,
reserve: -1
});
}
};
render() {
const children = React.Children.map(this.props.children, (child, i) => {
return React.cloneElement(child, {
heading: this.props.expandAll || this.state.active === i,
text: this.props.expandAll || this.state.active + stage === i,
onShow: () => this.onShow(i)
});
});
return <div className="accordion">{children}</div>;
}
};

Building off of #lissettdm answer, it's not clear to me why getAccordion and accordion are two separate entities. You might have a very valid reason for the separation, but the fact that the two components' states are interdependent hints that they might be better implemented as one component.
Accordion now controls the state of it's children directly, as before, but without using getAccordion. Toggling expandAll now resets the states of the individual items as well.
const NormalAccordion = () => {
const accordionArray = [ //... your data ];
const [state, setState] = useState({
expandAll: false,
...accordionArray.map(item => false),
});
const handleExpandAll = () => {
setState((prevState) => ({
expandAll: !prevState.expandAll,
...accordionArray.map(item => !prevState.expandAll),
}));
};
const handleTextExpand = (id) => {
setState((prevState) => ({
...prevState,
[id]: !prevState[id]
}));
};
return (
<>
<div className="w-full text-right">
<button onClick={handleExpandAll}>
{state.expandAll ? `Collapse All` : `Expand All`}
</button>
</div>
<br />
{accordionArray.map((item, index) => (
<div key={index}>
<div className="accordion">
<Heading handleTextExpand={handleTextExpand} id={index}>
<div className="heading-box">
<h1 className="heading">{item.heading}</h1>
</div>
</Heading>
<Text shouldExpand={state[index]}>
<p className="text">{item.text}</p>
</Text>
</div>
</div>
))}
</>
);
};
Heading passes back the index so the parent component knows which item to turn off.
class Heading extends React.Component {
handleExpand = () => {
this.props.handleTextExpand(this.props.id);
};
render() {
return (
<div
style={ //... your styles}
onClick={this.handleExpand}
>
{this.props.children}
</div>
);
}
}
Text only cares about one prop to determine if it should display the expand content.
class Text extends React.Component {
render() {
return (
<div style={{ ...this.props.style }}>
<div
className={`content ${this.props.shouldExpand ? "open" : ""}`}
>
{this.props.shouldExpand ? this.props.children : ""}
</div>
</div>
);
}
}

React | Reusable dropdown component | how to get selected option?

Fairly new with react. I'm creating a dropdown button for a Gatsby project. The button toggle works, but I'm having trouble getting the selected value to the parent where I need it.
-Tried lifting the state up, but this resulted in the button not appearing at all. I was a bit confused here so maybe I was doing something wrong.
-Also tried using refs although I wasn't sure if this was the right use case, it worked, however it seems the value is grabbed before it's updated in the child component and I'm not sure how to change or work around this. (the code is currently set up for this)
Are either of these options right? or could anybody steer me in the right direction, thanks.
Dropdown in parent:
this.dropdownRef1 = React.createRef();
componentDidUpdate(){
console.log("Color Option:" + this.dropdownRef1.current.state.ColorOption)
}
<DropdownBtn ref={this.dropdownRef1} mainText="Color" options={this.props.pageContext.colors || ['']} />
DropdownBtn:
export default class refineBtn extends React.Component {
constructor(props) {
super(props);
}
state = {
open: false,
[this.props.mainText + "Option"]: "all",
};
dropdownBtnToggle = () => {
this.setState((prevState)=> {
return{open: !prevState.open};
});
};
optionClickHandler = (option) => {
this.setState(() => {
console.log(this.props.mainText + " updated to " + option)
return {[this.props.mainText + "Option"] : option}
});
};
render(){
const options = this.props.options
console.log("open: " + this.state.open)
return(
<div>
<button onClick={this.dropdownBtnToggle} >
{this.props.mainText}:
</button>
<div className={this.state.open ? 'option open' : "option"} >
<p key={"all"} onClick={() => this.optionClickHandler("all")}> all</p>
{options.map(option => (
<p key={option} onClick={() => this.optionClickHandler(option)}>{option}</p>
))}
</div>
</div>
);
}
}

You can respond to selection by allowing your component to accept a callback.
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {open: false, value: ''}
}
render() {
return (
<div>
<div onClick={() => this.setState({open: true})}>{this.state.value}</div>
<div style={{display: this.state.open ? 'block' : 'none'}}>
{this.props.options.map((option) => {
const handleClick = () => {
this.setState({open: false, value: option})
this.props.onChange(option)
}
return (
<div key={option} onClick={handleClick} className={this.state.value === option ? 'active' : undefined}>{option}</div>
)
})}
</div>
</div>
)
}
}
<MyComponent onChange={console.log} options={...}/>

How do I make a map that when changing the state does not modify all the elements - React

I am using a json with several values, one of them is "iframe" which can be "si" (yes) or "no" depending on whether it is an iframe or not.
With that value (yes / no) I need (this.props.tabsiframe === 'yes') to show an <iframe> or a <div>.
My code works, because if (this.props.tabsiframe === 'yes') is an iframe it paints an iframe, but if the next element is (this.props.tabsiframe === 'no' ) change all the elements of <iframe> to <div>.
The re-rendering changes the already created divs and converts them to iframe if iframe = yes and if it is = it does not change the iframe to div. This is an example of what happens
https://drive.google.com/file/d/1cY9eHq_aBuQb8b_HtYUXjC6lqrYCJe3p/view
Maybe it happens because every time I click on the element the menu is updated: divIframe: {tabsDivIframe: [... new Set (this.state.divIframe.tabsDivIframe), url] .filter (function (el) { return the;})},. A new url is added to the array, so I guess that's what it renders and it changes the divs to iframes or iframes to divs.
class App extends Component {
constructor(props, context){
super(props, context);
["openTabs", "removeTab"].forEach((method) => {
this[method] = this[method].bind(this);
});
this.state = {
tabs:{
tabsLi: [],
},
divIframe:{
tabsDivIframe: [],
},
tabsiframe : '',
showtabs: true,
}
}
openTabs(e, url, iframe, trdtitle){
e.preventDefault();
this.setState({
showtabs: false,
})
if (this.state.tabs.tabsLi.includes(trdtitle) === false){
this.setState({
tabs: { tabsLi:[...new Set(this.state.tabs.tabsLi),trdtitle].filter(function(el) { return el; })},
divIframe: { tabsDivIframe:[...new Set(this.state.divIframe.tabsDivIframe),url].filter(function(el) { return el; })},
tabsiframe: iframe,
}, () => {
console.log(this.state.tabs.tabsLi);console.log(this.state.divIframe.tabsDivIframe);console.log(this.state.tabsiframe)
})
}
}
render(){
return (
<><Tabs
showtabs={this.state.showtabs}
tabs={this.state.tabs}
tabsLi={this.state.tabs.tabsLi}
divIframe={this.state.divIframe}
tabsDivIframe={this.state.divIframe.tabsDivIframe}
tabsiframe={this.state.tabsiframe}
openTabs={this.openTabs}
removeTab={this.removeTab}
/>
</>
)
}
}
class Tabs extends Component {
render(){
return(
<div id="content-tabs" className="tabs">
{( this.props.showtabs)
? (
<>
<div className="waiting-leads">
<p>Parece que todavía no hay ningún lead...</p>
<h3>¡Ánimo, ya llega!</h3>
<img src={imgDinosaurio} alt="Dinosaurio"></img>
</div>
</>
) : (
<>
<DivAndIframe
tabsDivIframe={this.props.divIframe.tabsDivIframe}
tabsiframe={this.props.tabsiframe}
/>
</>
)}
</div>
);
}
}
class DivAndIframe extends Component{
render(){
return(
<>
{this.props.tabsDivIframe.map((url, index) =>
<div key={url.toString() id={"myTab" + index}>
{( this.props.tabsiframe === 'si')
? (
<iframe title={"iframe"+index} className="iframeTab" src={url}></iframe>
) : (
<div>{url}</div>
)}
</div>
)}
</>
);
}
}

The problem you are having here is within your map.
Here is a state map to try to explain:
After First tab Click (div):
this.props.tabsiframe = 'no'
this.props.tabsDivIframe = ['www.sampleurl1.com']
After Second tab Click (iframe):
this.props.tabsiframe = 'yes'
this.props.tabsDivIframe = ['www.iframe2.com', 'www.sampleurl1.com']
so on the virtual DOM after the second click, the map will again iterate through this.props.tabDivIframe and evaluate this.props.tabsiframe as 'si' or 'no' for everything.
{this.props.tabsDivIframe.map((url, index) =>
<div key={url.toString() id={"myTab" + index}>
{( this.props.tabsiframe === 'si') //this line here; we share this same value for all tabs
? (
<iframe title={"iframe"+index} className="iframeTab" src={url}></iframe>
) : (
<div>{url}</div>
)}
</div>
)}
I wrote a small interactive sample of your problem here: https://jsfiddle.net/eojrx6my/6/
You will need to store individual 'tabsiframe' for each url, or somehow identify them individually

Connect two dropdown filters to one search button

I have two dropdowns that are filtering, but they filter as you drop them down and make selections. I have a search button that I would like to hook them both to. So you just saw a change in results once, after you pressed the button. I think i have all the logic i need here But im not sure exactly how to hook up the button
note: i know i have alot of logic in the render, but im just trying to make it work first
So far this is what I have:
constructor(props) {
super(props);
this.state = {
developers: [],
filterCountry: "All locations",
filterSkills: "All skills"
};
}
componentDidMount() {
fetch('API')
.then(features => features.json())
.then(developers => {
this.setState({ developers })
})
}
filterCountry(e){
this.setState({filterCountry: e })
}
filterSkills(e){
this.setState({filterSkills: e })
}
render() {
let developers = this.state.developers.features
if (!developers ){
return null
}
if (this.state.filterCountry && this.state.filterSkills) {
developers = developers.filter( developer => {
return this.state.filterCountry === 'All locations' ||
developer.properties.continent.includes(this.state.filterCountry)
});
developers = developers.filter( developer => {
return this.state.filterSkills === 'All skills' ||
developer.properties.skills.includes(this.state.filterSkills)
});
}
return (
<div>
<div>
<ControlSelect
onChange={this.filterCountry.bind(this)}
value={this.state.filterCountry}
options={options_dd1}
/>
</div>
<div className="inline-block mr24">
<ControlSelect
onChange={this.filterSkills.bind(this)}
value={this.state.filterSkills}
options={options_dd2}
/>
</div>
<button>Search</button>
</div>
<div>
<div>
{developers.map(developer => {
return (
<div key={developer.id}">
{developer.properties.name}
{developer.properties.description}
{developer.properties.skills}
</div>
</div>
</div>
)}
)}
)
any help would be greatly appreciated

The main problem with what you have is that once the filtering is done, there is no way to get the original list of developers back. You can create an 'original list' or developers and a new filteredList, which could be actually used by the render method to show data.
Basically, in your initial render, the developers key in your state is the default loaded from fetch and will get rendered in its entirety. Once you click the button, the doSearch method will modify the state and remove developers. This will cause the render to be called and show the new filtered list.
Otherwise, there's a few minor things things taht I have commented below.
constructor(props) {
super(props);
this.state = {
developers: [],
filterCountry: "All locations",
filterSkills: "All skills"
};
}
componentDidMount() {
fetch('API')
.then(features => features.json())
.then(developers => {
this.setState({ developers })
})
}
filterCountry(e){
this.setState({filterCountry: e })
}
filterSkills(e){
this.setState({filterSkills: e })
}
doSearch() {
// Create copy of state (you had a `.filtered` in your code, which doesn't make sense as developers is an array so it will have no `filtered` property unless you modified the prototype
let developers = this.state.developers.slice()
// This if block is pointless, because you start with a default state in the constructor (so unless your ControlSelect have a falsy option, this will always evaluate to `true`)
if (this.state.filterCountry && this.state.filterSkills) {
// THis will match EITHER country OR skills. You can change to && if wanted.
developers = developers.filter( developer => {
return this.state.filterCountry === 'All locations' ||
developer.properties.continent.includes(this.state.filterCountry) || this.state.filterSkills === 'All skills'
|| developer.properties.skills.includes(this.state.filterSkills)
});
this.setState({ developers })
}
}
render() {
return (
<div>
<div>
<ControlSelect
onChange={this.filterCountry.bind(this)}
value={this.state.filterCountry}
options={options_dd1}
value={this.state.filterCountry}
/>
</div>
<div className="inline-block mr24">
<ControlSelect
onChange={this.filterSkills.bind(this)}
value={this.state.filterSkills}
options={options_dd2}
value={this.state.filterSkills}
/>
</div>
<button onClick={this.doSearch.bind(this)}>Search</button>
</div>
<div>
<div>
{/* Now the developers contains stuff that was filtered in search */}
{this.state.developers.map(developer => {
return (
<div key={developer.id}>
{developer.properties.name}
{developer.properties.description}
{developer.properties.skills}
</div>
</div>
</div>
)}
)}
)

Open a modal from a component

I am working on a component where I need to display and hide a modal.
this is what I have in the render method in React
<div style={{visibility : this.state.displayModal}}>
<p>Pop up: Bet Behind Settings</p>
</div>
<button onClick={this._openModal}>CLICK</button>
and here is the function
_openModal = () => {
if (this.state.displayModal === 'hidden') {
this.setState({
displayModal : 'visible',
})
} else {
this.setState({
displayModal : 'hidden',
})
}
}
the main concern I have, is, how to set the state in a more elegant way, or this should be the way to do it ?
here the full code
constructor (props) {
super(props);
this.state = {
displayModal : 'hidden',
}
}
render () {
return (
<div style={{visibility : this.state.displayModal}}>
<p>Pop up: Bet Behind Settings</p>
</div>
<button onClick={this._openModal}>CLICK</button>
)
}
_openModal = () => {
if (this.state.displayModal === 'hidden') {
this.setState({
displayModal : 'visible',
})
} else {
this.setState({
displayModal : 'hidden',
})
}
}
so, what should be the way to this pop up in a React way.

I think it's a good way to do it. But it will be more concise if you make displayModel a boolean:
_toggleModal = () => this.setState({displayModal: !this.state.displayModal})

On a complex page using hidden will be a performance issue. Try something like this instead;
render() {
var returnIt;
if (this.state.hide) {
returnIt = null;
} else {
returnIt = (
<div style={{visibility : this.state.displayModal}}>
<p>Pop up: Bet Behind Settings</p>
</div>
<button onClick={this._openModal}>CLICK</button>
)
}
return (returnIt);
}

This is just a personal opinion, but I think a better UX would be that the button should only be used to open the modal; and the modal should be closed by either clicking the X in the modal (if there is) or when you click anywhere outside the modal.
That said if you definitely need the button to toggle between the 2 states, how about something like this?
constructor (props) {
super(props);
this.state = {
displayModal : false
}
}
render () {
return (
<div style={{visibility : this.state.displayModal === true ? 'visible' : 'hidden'}}>
<p>Pop up: Bet Behind Settings</p>
</div>
<button onClick={this._toggleModal}>CLICK</button>
)
}
_toggleModal = () => {
const current = this.state.displayModal;
this.setState({
displayModal : !current
});
}

Using https://github.com/fckt/react-layer-stack you can do like so:
import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ 'Delete' }
message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
</Modal> }
</Layer>
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
</Cell>)
// ...