We Keep Coding

When switching ant desing tabs it shows previous table instead of choosen table react js

<Drawer
width={"80%"}
placement="right"
closable={true}
title={assetName[1]}
onClose={self.onClose}
visible={self.state.visible}
>
<Spin spinning={self.state.detailLoading}>
<Tabs defaultActiveKey="1" type="card" onChange={self.callback} >
<TabPane
tab={
<span>
{trans('dataTracking.productivity')}
</span>
}
key="1"
>
<Productivity
detailKey={self.state.detailKey}
/>
</TabPane>
<TabPane
tab={
<span>
{trans('dataTracking.working')}
</span>
}
key="2"
>
<Working
detailKey={self.state.detailKey}
detailLoading={self.state.detailLoading}
/>
</TabPane>
</Tabs>
</Spin>
</Drawer>
)}
**I'm using tables in Ant design tabs. But when changing the tabs, the previous table appears instead of the table I opened.There are different tables in the transitions between tabs. But when I want to go back to the table I opened at first, the data of the previous table comes. **

querySelector to find a DOM element which has particular text anywhere inside its tree

<div>
<card class="card-class">
<header class="header-class">Title 1</header>
</card>
<div>Stuff</div>
<card class="card-class"> <-- This one
<header class="header-class">Title 2</header>
</card>
<div>More stuff?</div>
<card class="card-class">
<header class="header-class">Title 3</header>
</card>
</div>
I would like to pull out the DOM element as noted in the example using 2 conditions. The dom element I am interested in has a class card-class and somewhere inside this DOM element there is an element with class header-class which has a title inside.
I need to get a particular card BY the title text. So in this example I want the card element with 'Title 2'. Is there any way to ahcieve this with just a selector rather than javascript?

The only possible way I can see this working with one line is if you add a data attribute to the element, and then target that.
const title2 = document.querySelector('.header-class[data-title="Title 2"]');
console.log(title2.textContent);
<div>
<card class="card-class">
<header class="header-class" data-title="Title 1">Title 1</header>
</card>
<div>Stuff</div>
<card class="card-class">
<header class="header-class" data-title="Title 2">Title 2</header>
</card>
<div>More stuff?</div>
<card class="card-class">
<header class="header-class" data-title="Title 3">Title 3</header>
</card>
</div>

Not sure it´s possible with a one-liner, but here is an alternative:
First you get all the "header-class", that are descendant of "card-class".
Then you loop through them looking for requested title.
And finally you access the parent component, which is the card you are looking for.
const cards = document.querySelectorAll(".card-class .header-class");
for (let card of cards) {
if (card.innerHTML === "Title 2") {
let cardYouAreLookingFor = card.parentElement;
console.log(cardYouAreLookingFor);
}
}
Hope this helps. Cheers!

How to get the properties when a slide is clicked in swiperjs without jquery

I am trying to get the values of a specific card when it is clicked in swiperJS but am not finding in the documentation if it is possible to do so.
Hoping to not resort to wrapping each slide in a label and input button.
My code here:
<Swiper
slidesPerView={'auto'}
spaceBetween={200}
centeredSlides={true}
pagination={{
"clickable": true
}}>
{Cards.map((card, idx) => {
return (
<div className="row" style={{ display: 'inline-block' }}>
<div className="col-12 swiper-container">
<SwiperSlide>
<Cards
number={card.number}
name={card.name}
expiry={card.expiry}
cvc={card.cvc}
// focused={focus}
/>
</SwiperSlide>
</div>
</div>
)
})}
</Swiper>
Is it possible to do so?

Looking at swiper's react source code it seems like SwiperSlide renders by default into a div node . This node can receive a onClick prop, which should execute whatever function you want. That would look something like this:
<SwiperSlide onClick={()=> console.log(card.name)}>
// ...
</SwiperSlide>
If for some reason that doesn't work either, consider adding the onClick to a div already wrapping the slide (for example div.col-12.swiper-container)

How to make 3 column row from API data in React

First time doing this so please bear with me.
Using Bootstrap. Trying to make some data present itself as a 3 column row. And at the end of each row, make a new row.
Is there a way to do this with the code below?
Code sandbox here.
Here's the code:
<input
className="search"
type="text"
placeholder="Search by model..."
onChange={(e) => setSearchValue(e.target.value)}
value={searchValue}
/>
{/* Map through first level */}
{data.map((item) => (
<ul>
{/* Filter and map through the second level */}
{item.product_details.filter(filterProducts).map((subItem) => (
<div className="row">
<div className="col-lg-4">
<MachineCard
image={subItem.image}
title={subItem.model}
weight={subItem.operating_weight}
power={subItem.power}
/>
</div>
</div>
))}
</ul>
))}

How to Update content using ReactJS

I'm new in React and I trying to build a simple list of items clickable to get data and update the DOM, I have a list of links on render()
const listNews = this.state.news.map((item, i) =>
<ListGroupItem key={i} className="font-size-1 text-left">
<a href='#' onClick={() => this.getInfoNews(i)}>{item.title}</a>
</ListGroupItem>
);
the function "getInfoNews(i)" have this piece of code to display the data into DOM
getInfoNews(i){
var content = {
news : this.state.news[i]
}
console.log(content.news)
if(content.news === undefined){
return (
<Card>
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and card's content.</CardText>
</CardBody>
</Card>
)
}else{
return (
<Card>
<CardBody>
<div className="container">
<img src={content.news.urlToImage} className="w-100" />
<CardTitle>
<div className="bottom-left font-size-2 bg-dark w-50 p-2 text-uppercase text-left">{content.news.title}</div>
</CardTitle>
</div>
<CardSubtitle className="text-right text-dark font-size-1 mr-4">
by {content.news.author ? content.news.author : "Anonymous"} , published at {content.news.publishedAt}
</CardSubtitle>
<CardText className="text-dark font-size-2 mt-4">
{content.news.description} read more
</CardText>
</CardBody>
</Card>
)
}
}
Work perfect on load first time, but dont work once clicked on every link, the data is loaded but the DOM dont update, some one can help me ? thanks!

React re-renders whenever there is an update to either the state or the props.
For example, you can load new data from API, and then do this.setState to update the component state. Then, react will re-render the component automatically.