Develop Reference

How to make a child React component show for a certain amount of time?

I have a React component called PopUpBanner that I use to show messages. For example, in my login component, I use it like this. If an error occurs, then I set the bannerMessage state to have text so that the banner shows:
this.setState({
bannerMessage: {
msg: error.message + ". Incorrect email address or password.",
isError: true,
},
});
Here is how the component is then used:
<PopUpBanner
message={bannerMessage.msg}
isError={bannerMessage.isError}
></PopUpBanner>
And here is the PopUpBanner class:
import React, { Component } from "react";
class PopUpBanner extends Component {
constructor(props) {
super(props);
this.state = {
message: this.props.message,
};
}
// TODO : not in use
reset = () => {
this.resetId = setTimeout(
function () {
this.setState({ message: "" });
}.bind(this),
3000
);
};
componentDidMount() {}
componentWillUnmount() {
if (this.timeoutId) {
clearTimeout(this.timeoutId);
console.log("clearing time out");
}
}
render() {
const message = this.props.message;
const isError = this.props.isError;
return (
<div style={message != "" ? { display: "block" } : { display: "none" }}>
<div>
{isError ? (
<div
className="alert alert-danger text-center"
role="alert"
style={{ width: "50%", margin: "auto" }}
>
{message}
</div>
) : (
<div
className="alert alert-primary text-center"
role="alert"
style={{ width: "50%", margin: "auto" }}
>
{message}
</div>
)}
</div>
</div>
);
}
}
export default PopUpBanner;
The problem is that the PopUpBanner is shown until the page is refreshed or navigated to another page.
So if you look at the PopUpBanner class, I attempted to use setTimeout but wasn't able to finish it.
Any ideas on how I can transform PopUpBanner component to be on a timer?

I see two options:
Handle it in the parent component, only rendering PopUpBanner when it should be there, using setTimeout to trigger a state update that re-renders the parent without rendering PopUpBanner.
Handle it in PopUpBanner, returning null from render after the expiration.
I would prefer #1 over #2. But your existing code is basically doing #2, you just have to adjust render to support it:
render() {
const message = this.props.message;
if (!message) {
return null;
}
// ...show the message...
But as discussed in teh comments, I wouldn't copy props to state like that. So instead:
constructor(props) {
super(props);
this.state = {
expiredMessage: null,
};
}
then to expire a message:
setupExpiration() {
this.expirationTimer = setTimeout(() => {
this.setState(() => ({expiredMessage: this.props.message}));
}, 1000); // <== Or however long you want it showing
}
...which you call from a couple of lifecycle methods:
componentDidMount() {
this.setupExpiration();
}
componentDidUpdate() {
this.setupExpiration();
}
and render becomes:
render() {
const { expiredMessage } = this.state;
const { message } = this.props;
if (expiredMessage === message) {
return null;
}
// ...show the message...
But again, I'd go for having the parent in control of this, actually removing PopUpBanner when it shouldn't be showing:
class PopUpBanner extends React.Component {
render() {
const {message} = this.props;
return <div className="banner">{message}</div>;
}
}
class Parent extends React.Component {
state = {
message: null,
};
constructor(props) {
super(props);
this.showMessage = this.showMessage.bind(this);
this.messageTimer = 0;
}
showMessage() {
clearTimeout(this.messageTimer);
this.setState({message: "Hi there, I'm a banner"});
this.messageTimer = setTimeout(() => {
this.setState({message: null});
}, 1000);
}
render() {
const {message} = this.state;
const {showMessage} = this;
return <div className="with-banner">
{message && <PopUpBanner message={message} />}
<div>
<input type="button" value="Show Message" onClick={showMessage} />
</div>
</div>;
}
};
ReactDOM.render(<Parent />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Cannot access this.setState or this.state inside Ant Modal confirm ok/cancel function

I'm having issues with accessing this.state and this.setState inside the onCancel/onOk function. I want to modify the state after confirmation or canceling the pop-up modal. If anyone's got a different approach, your guidance would be helpful.
import React from 'react';
import { Button, Modal } from 'antd';
class ExampleClass extends React.Component {
constructor() {
super();
this.state = {
bankInfo: 100,
};
}
onButtonClicked() {
this.setState({ bankInfo: 200 }); // works fine
Modal.confirm({
title: 'Are you sure delete this item?',
okType: 'danger',
onOk() {
this.setState({ bankInfo: 300 }); // Uncaught TypeError: Cannot read property 'setState' of undefined
},
onCancel() {
this.setState({ bankInfo: 400 }); // Uncaught TypeError: Cannot read property 'setState' of undefined
},
});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked.bind(this)}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;

I would prefer to use arrow function
import React from 'react';
import { Button, Modal } from 'antd';
class ExampleClass extends React.Component {
constructor() {
super();
this.state = {
bankInfo: 100,
};
}
onButtonClicked = () => {
this.setState({ bankInfo: 200 });
Modal.confirm({
title: 'Are you sure delete this item?',
okType: 'danger',
onOk: () => {
this.setState({ bankInfo: 300 });
},
onCancel: () => {
this.setState({ bankInfo: 400 });
},
});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;

You need to bind your method to the class.
import React from 'react';
import { Button, Modal } from 'antd';
class ExampleClass extends React.Component {
constructor() {
super();
this.state = {
bankInfo: 100,
};
}
onOkHandler = () => {this.setState({ bankInfo: 300 })}
onCancelHandler = () => {this.setState({ bankInfo: 400 })}
onButtonClicked() {
this.setState({ bankInfo: 200 }); // works fine
Modal.confirm({
title: 'Are you sure delete this item?',
okType: 'danger',
onOk() {
this.onOkHandler()
},
onCancel() {
this.onCancelHandler()
},
});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked.bind(this)}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;

componentDidUpdate(prevProps, prevState, snapshot): prevProps is undefined

I am pretty new to React and I am trying to build this simple web app that takes a stock tag as an input and updates the graph based on the performance of the given stock. However, I can't get my graph to update. I tried using componentDidUpdate(prevProps, prevState, snapshot), but for some reason prevProps is undefined and I don't know/understand why. I tried searching online and reading the doc file, but I still can't figure it out. Any help would be appreciated.
import Search from './Search.js'
import Graph from './Graph.js'
import Sidebar from './Sidebar.js'
import './App.css'
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [{
x: [],
close: [],
decreasing: { line: { color: '#FF0000' } },
high: [],
increasing: { line: { color: '#7CFC00' } },
line: { color: 'rgba(31,119,180,1)' },
low: [],
open: [],
type: 'candlestick',
xaxis: 'x',
yaxis: 'y'
}]
,
layout: {
width: 1500,
height: 700,
font: { color: '#fff' },
title: { text: 'Stock', xanchor: "left", x: 0 }, paper_bgcolor: '#243b55', plot_bgcolor: '#243b55', yaxis: { showgrid: true, color: '#fff' },
xaxis: {
zeroline: true, color: '#fff', showgrid: true, rangeslider: {
visible: false
}
}
},
searchfield: '',
stocktag: ' '
};
this.onSearchChange = this.onSearchChange.bind(this);
this.onSubmitSearch = this.onSubmitSearch.bind(this);
}
componentDidMount() {
document.body.style.backgroundColor = '#243b55';
this.loadGraphInfo();
}
componentDidUpdate(prevProps, prevState, snapshot){
console.log(prevProps.stocktag);
console.log(prevState.stocktag);
if (prevProps.stocktag !== prevState.stocktag) {
//this.fetchData('SPY');
}
}
onSearchChange = (event) => {
var search = event.target.value;
this.setState({ stocktag: search });
}
onSubmitSearch = (e) => {
var search = this.state.searchfield;
this.setState({ stocktag: search });
}
fetchData(stock) {
//GET DATA
//UPDATE STATE
}
loadGraphInfo() {
if (this.state.stocktag == ' ') {
this.fetchData('SPY');
} else {
this.fetchData(this.state.stocktag);
}
}
render() {
return (
<div className="App" >
<Sidebar />
<Search searchChange={this.onSearchChange} submitChange={this.onSubmitSearch} />
<Graph data={this.state.data} layout={this.state.layout} />
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import './Search.css'
const Search = ({ searchChange, submitChange }) => {
return (
<div>
<div class="SearchCompInput">
<input class="SearchBar" type="text" onChange={searchChange}/>
</div>
<div class="SearchCompButton">
<button class="SearchButton" onClick={submitChange}>Search</button>
</div>
</div>
);
}
export default Search;

The prevProps.stocktag is undefined because you didn't pass any props to App component. Try this in your index.js you will see preProps value but actually it does not make any sense.
render(<App stocktag='' />, document.getElementById('root'));
componentDidUpdate(prevProps, prevState, snapshot){
console.log(prevProps.stocktag);
console.log(prevState.stocktag);
if (prevProps.stocktag !== prevState.stocktag) {
//this.fetchData('SPY');
}
}

I am not quite sure on what you are trying to accomplish here but the first thing I notice is you setState of stocktag to this.state.searchfield which is ' ' in your onSubmitSearch function.
onSearchChange = (event) => {
var search = event.target.value;
this.setState({ stocktag: search });
}
onSubmitSearch = (e) => {
var search = this.state.searchfield;
this.setState({ stocktag: search });
}
Add I will also like to add that it is good practice to set value of input to a state value like so
import React, { Component, useState } from 'react';
import './Search.css'
const Search = ({ searchChange, submitChange }) => {
const [inputValue, setInputValue] = useState('')
const handleChange = (e) => {
setInputValue(e.target.value)
searchChange(e)
}
return (
<div>
<div class="SearchCompInput">
<input class="SearchBar" type="text" value = {inputValue} onChange={handleChange}/>
</div>
<div class="SearchCompButton">
<button class="SearchButton" onClick={submitChange}>Search</button>
</div>
</div>
);
}
export default Search;

I had this problem, and it was because there was a child class that was calling super.componentDidUpdate() WITHOUT passing in the parameters. So the child class looked something like:
componentDidUpdate() {
super.componentDidUpdate();
... <-- other stuff
}
And I had to change it to:
componentDidUpdate(prevProps, prevState) {
super.componentDidUpdate(prevProps, prevState);
... <-- other stuff
}

Disable button when clicked in React JS

I am trying to disable a button on click in React JS, as its function is to add articles to an array. When as user clicks saves article, the button should disable, so they can't save again.
So far for this component my code is as follows:
import React, { Component } from 'react';
import './news-hero.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 1,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 1,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
class NewsHero extends Component {
_isMounted = false;
state = {
loading: false,
data: [],
headline: [],
saved: []
}
saved = headline => {
this.setState(
(prevState) => ({ saved: [...prevState.saved, headline] }),
() => {
console.log('Saved articles = ', this.state.saved);
alert('Article saved');
localStorage.setItem('saved', JSON.stringify(this.state.saved));
localStorage.getItem('saved');
});
}
constructor(props) {
super(props)
this.saved = this.saved.bind(this)
}
onError() {
this.setState({
imageUrl: "../assets/img-error.jpg"
})
}
componentDidMount() {
this._isMounted = true;
this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=xxxx')
.then(headline => headline.json())
.then(headline => this.setState({ headline: headline.articles, loading: false }, () => console.log(headline.articles)))
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
return (
<div className="hero">
<h2 className="text-left">News</h2>
{this.state.loading
? "loading..."
: <div>
<Carousel
additionalTransfrom={0}
showDots={true}
arrows={true}
autoPlaySpeed={3000}
autoPlay={false}
centerMode={false}
className="carousel-hero"
containerClass="container-with-dots"
dotListClass="dots"
draggable
focusOnSelect={false}
infinite
itemClass="carousel-top"
keyBoardControl
minimumTouchDrag={80}
renderButtonGroupOutside={false}
renderDotsOutside
responsive={responsive}>
{this.state.headline.map((post, indx) => {
return (
<div className="text-left mt-5" key={indx}>
<img className="media-img card-img-top card-img-hero" src={post.urlToImage} alt="Alt text"></img>
<div className="card-body container hero-text-body">
<h1 className="card-title hero-title text-truncate">{post.title}</h1>
<button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Save article</button>
<p className="card-text">{post.description}</p>
Read More
</div>
</div>
)
})}
</Carousel>
</div>
}
</div>
)
}
}
export default NewsHero;
Other questions answers don't really answer this straight question as the other questions are bespoke answers to other scenario codes.

You can pass the event to your onClick() function.
onClick={(e) => this.saved(e, post)}
You can then use that event and currentTarget to get the HTML element that contains the onClick and disable that element.
saved = (e, headline) => {
// Disable clicked button
e.currentTarget.disabled = true;
...
}

As Ed Lucas suggest, you can do it like that or, you can maintain your button status on the state and change it according to click event.
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
btnStatus: false
};
}
render() {
return (
<div>
<button
disabled={this.state.btnStatus}
onClick={() => this.setState({ btnStatus: true })}
>
CLICK
</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));

How should I instantiate my state from props?

Reading around, I see that initializing state from props in the getInitialState()/constructor can be an anti-pattern.
What is the best way of initializing state from props and managing to be consistent?
As you can see below, I'm trying to initialize my "Card" component so that I may have a likeCount and isLikedByMe states initialized. I do this so that I may have a custom like counter displayed and the text of the Like button to change, by resetting the state.
At this point, I'm doing this in the constructor, but that is the wrong way to do it. How should I manage this?
import * as React from "react";
import { CardLikeButton } from "./buttons";
export enum CardType {
None = 0,
Text,
Image
}
export interface CardMedia {
text?: string;
imageUrl?: string;
}
export interface CardDetails {
isLikedByMe: boolean;
likeCount: number;
}
export interface CardParams extends React.Props<any> {
cardType: number;
cardId: string;
cardMedia: CardMedia;
cardDetails: CardDetails;
}
export class Card extends React.Component<CardParams, CardDetails> {
state: CardDetails;
constructor(props: CardParams) {
super(props);
console.log("in card constructor");
console.log("card type: " + props.cardType);
this.state = { // setting state from props in getInitialState is not good practice
isLikedByMe: props.cardDetails.isLikedByMe,
likeCount: props.cardDetails.likeCount
};
}
componentWillReceiveProps(nextProps: CardParams) {
this.setState({
isLikedByMe: nextProps.cardDetails.isLikedByMe,
likeCount: nextProps.cardDetails.likeCount
});
}
render() {
console.log("RENDERING CARD");
// console.dir(this.props.cardDetails);
// console.dir(this.props.cardMedia);
// console.dir(this.props.cardType);
if (this.props.cardType === CardType.Text) { // status card
return (
<div className="general-card">
<p>Text card.ID: {this.props.cardId}</p>
<p>{this.props.cardMedia.text}</p>
<CardLikeButton onButClick={this.likeButtonClicked} buttonText={this.state.isLikedByMe ? "Liked" : "Like"} isPressed={this.state.isLikedByMe}/>
<p>Like count: {this.state.likeCount}</p>
</div>
);
} else { //photo card
return (
<div className="general-card">
<p>Image card.ID: {this.props.cardId}</p>
<p> {this.props.cardMedia.text} </p>
<img src={this.props.cardMedia.imageUrl} />
<br/>
<CardLikeButton onButClick={this.likeButtonClicked} buttonText={this.state.isLikedByMe ? "Liked" : "Like"} isPressed={this.state.isLikedByMe}/>
<p>Like count: {this.state.likeCount}</p>
</div>
);
}
}
likeButtonClicked = () => {
console.log('in card => like button clicked!');
var _isLikedByMe = this.state.isLikedByMe;
var _likeCount = this.state.likeCount;
if (_isLikedByMe) {
_likeCount--;
} else {
_likeCount++;
}
_isLikedByMe = !_isLikedByMe;
this.setState({
isLikedByMe: _isLikedByMe,
likeCount: _likeCount
})
}
}
Here is the main list component:
/// <reference path="../../typings/index.d.ts" />
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Card} from "./card";
import {CardParams, CardType, CardMedia, CardDetails} from "./card";
var card1: CardParams = {
cardType: CardType.Image,
cardId: "card1234",
cardDetails: {
isLikedByMe: false,
likeCount: 3
},
cardMedia: {
text: "some test text; badescuga",
imageUrl: "http://www9.gsp.ro/usr/thumbs/thumb_924_x_600/2016/06/19/738742-rkx1568-lucian-sinmartean.jpg"
}
};
var card2: CardParams = {
cardId: "card35335",
cardType: CardType.Text,
cardDetails: {
isLikedByMe: true,
likeCount: 1
},
cardMedia: {
text: "some test 2 text"
}
};
var cards = [card1, card2];
ReactDOM.render(
<div>
{
cards.map((item) => {
return (
<Card key={item.cardId} cardId={item.cardId} cardType={item.cardType} cardDetails={item.cardDetails} cardMedia={item.cardMedia}/>
);
})
}
</div>,
document.getElementById("mainContainer")
);

Without getting into working with Flux, or Redux, and focusing on your question.
IMHO, state and props need to be separated, where Card only gets props, and state is managed from above. Card component will get an event handler to raise once the like button has been clicked. You could either do the "like" logic inside the Card component, and just raise the event handler with the output of that logic, for example:
this.props.likeClicked(isLikedByMe, updatedLikeCount).
Or, do the whole logic in the parent component.
I would also wrap all cards in another component.
Example:
class Card extends React.Component {
constructor(props: CardParams) {
super(props);
}
render() {
return (
<div>
<button onClick={this.likeButtonClicked}>
{this.props.isLikedByMe ? 'Unlike' : 'Like'}
</button>
<p>Like count: {this.props.likeCount}</p>
</div>
)
}
likeButtonClicked = () => {
console.log('in card => like button clicked!');
var _isLikedByMe = this.props.isLikedByMe;
var _likeCount = this.props.likeCount;
if (_isLikedByMe) {
_likeCount--;
} else {
_likeCount++;
}
_isLikedByMe = !_isLikedByMe;
if (this.props.likeUpdated) {
this.props.likeUpdated({
cardId: this.props.cardId,
isLikedByMe: _isLikedByMe,
likeCount: _likeCount
})
}
}
}
class CardList extends React.Component {
constructor(props) {
super(props)
this.state = {
// Could use es6 map
cards: {123: {isLikedByMe: false, likeCount: 3},
124: {isLikedByMe: true, likeCount: 2}}
}
}
_onLikeUpdated({cardId, isLikedByMe, likeCount}) {
const cards = Object.assign({}, this.state.cards)
cards[cardId] = {isLikedByMe, likeCount}
this.setState({cards})
}
_getCards() {
return Object.keys(this.state.cards).map(cardId => {
return <Card key={cardId}
cardId={cardId}
likeUpdated={this._onLikeUpdated.bind(this)}
{...this.state.cards[cardId]} />
})
}
render() {
return <div>
{this._getCards()}
</div>
}
}
Fiddle: https://jsfiddle.net/omerts/do13ez79/