How to expand on initial loading
Closed this issue · 11 comments
I have the following code
tripsData.trips.map(trip => {
if (!trip.isOpen) {
return <Ticket
cx={cx}
key={trip.id}
id={trip.id}
trip={trip}
onTripClick={this.onTripClick}
/>
} else {
return <Collapse isOpened={true} key={"callapse_" + trip.id}>
<ActiveTicket
cx={cx}
key={trip.id}
id={trip.id}
trip={trip}
onTripClose={this.onTripClose}
/>
</Collapse>
}
}
This is a conditional rendering. When user clicks on a trip block it gets trip.isOpen=true and this one become another component ActiveTicket. I want it animate. How to get this work?
<Collapse isOpened={trip.isOpen} key={"callapse_" + trip.id}>
{trip.isOpen ? (
<ActiveTicket
cx={cx}
id={trip.id}
trip={trip}
onTripClose={this.onTripClose} />
) : (
<Ticket
cx={cx}
id={trip.id}
trip={trip}
onTripClick={this.onTripClick} />
)}
</Collapse>warning.js:36 Warning: Failed prop type: Required prop isOpened was not specified in Collapse.
No, last error was not related. Now there no errors, but list is empty because of initial value isOpened={trip.isOpen}. So it renders nothing.
Oh, yeah, sorry. Just set it to true so it renders all the time.
<Collapse isOpened={true} key={trip.id}>
{trip.isOpen ? (
<ActiveTicket
cx={cx}
id={trip.id}
trip={trip}
onTripClose={this.onTripClose} />
) : (
<Ticket
cx={cx}
id={trip.id}
trip={trip}
onTripClick={this.onTripClick} />
)}
</Collapse>yep, this works, but styles are a little bit weird on expanding.
Check the next version of react-collapse, if you are still using old one... npm install -S react-collapse@next
Also make sure ActiveTicket and Ticket do not have any margins.
If you need margins - wrap whole thing into a div with padding:
<Collapse isOpened={true} key={trip.id}>
<div styles={}>
{trip.isOpen ? (
<ActiveTicket
cx={cx}
id={trip.id}
trip={trip}
onTripClose={this.onTripClose} />
) : (
<Ticket
cx={cx}
id={trip.id}
trip={trip}
onTripClick={this.onTripClick} />
)}
</div>
</Collapse>There are no margins. Now this is what I see
Now, it's ok. I wrapped this into container and set padding. Thanks