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>

React-JS How do I make a preloader icon appear before the image gallery is loaded?

I have a lightbox gallery coming through dependency react-lightbox-component.
Everything is working fine but before the gallery pop up on the screen I would like to show a preloader icon coming from the font-awesome:
<i className="fa fa-spinner"></i>
The font-awesome is already installed in my application and working fine. How do I imnplement the preloader with the lightbox gallery?
React-lightbox-Component documentation:
https://www.npmjs.com/package/react-lightbox-component
My component:
import React, { Component } from 'react'
import Lightbox from 'react-lightbox-component';
class PortfolioPage extends Component {
constructor(props) {
super(props);
this.state = {
resultPhotos: []
}
}
componentDidMount() {
this.setState({
resultPhotos: this.props.data.photos
})
}
render() {
const { resultPhotos } = this.state;
const renderImages = resultPhotos && resultPhotos.map((photo, index) => {
return (
{
src: `../images/${photo}`,
key: index
}
)
})
return (
<div>
<Lightbox images={renderImages} />
</div>
)
}
}
export default PortfolioPage

Try this way:
I changed the componentDidMount in order to set the photos already parsed.
I also changed the return section with two render possibilities.
Hope it helps.
import React, { Component } from 'react'
import Lightbox from 'react-lightbox-component';
class PortfolioPage extends Component {
constructor(props) {
super(props);
this.state = {
resultPhotos: []
}
}
componentDidMount() {
const parsePhotos = arr =>
arr.map((photo, index) => ({
src: `../images/${photo}`,
key: index
}));
const { data } = this.props;
if (data && data.photos) {
this.setState({
resultPhotos: [...parsePhotos(data.photos)]
})
}
}
render() {
const { resultPhotos } = this.state;
return (
<div>
{ !!resultPhotos.length
? (<Lightbox images={resultPhotos} />)
: (<i className="fa fa-spinner"></i>)
}
</div>
)
}
}
export default PortfolioPage
UPDATE
After a chat with #claudiobitar we found that it was a problem with the dependency react-lightbox-component.
It is not a problem of the PortfolioPage.jsx, but the Lightbox component.
If it is a dependency issue there is no much to do, sorry, just try another one.
If a dependency has less than 1000 downloads per week is a bad sign.

componentDidMount() {
this.setState({
resultPhotos: this.props.data.photos,
isReady = false,
})
}
render() {
const { resultPhotos, isReady } = this.state;
const renderImages = resultPhotos && resultPhotos.map((photo, index) => {
return (
{
src: `../images/${photo}`,
key: index
}
)
})
if (!isReady) return (<i className="fa fa-spinner"></i>);
return (
<div>
<Lightbox images={renderImages} />
</div>
)
}
Here you almost have everything you need, just find the right place where to put this.setState({isReady: true}).

React - Why is componentDidMount event called instantly

I've playing around with animation implemented with reactjs.
In the app I created a car which drives around a track. On this track there are obstacles, which the car should recognize.
I'm using window.setInterval for the repeating events. Maybe this is not the best option, but actually I don't know how to do else.
Since some changes, there are multiple intervals running.
But actually I don't know the reason for it. Can anybody give me a hint, why the racer component is instantly running in componentdidmount event?
The Racer component is giving the current position and degree / ankle to the Track component. The Track component is storing these values in states and giving it to the Racer component as props. But this should not lead to instantly firing componentdidmount event of Racer component, or?
Here is my code:
App.js
import React, { Component } from 'react';
import Track from './components/track.js';
const uuidv1 = require('uuid/v1');
class App extends Component {
constructor(props) {
super(props);
this.state = {
obstacles: [
{
key: uuidv1(),
position: {
left: 500,
top:10,
},
width: 25,
height: 25,
},
{
key: uuidv1(),
position: {
left: 650,
top:60,
},
width: 25,
height: 25,
}
],
};
}
render() {
return (
<div className="App">
<Track width={800} height={100} obstacles={this.state.obstacles}>
</Track>
</div>
);
}
}
export default App;
Track.js
import React, { Component } from 'react';
import styled from 'styled-components';
import Racer from './racer.js';
import Obstacle from './obstacle';
import centralStrip from '../images/centralStrip.png';
const uuidv1 = require('uuid/v1');
class Track extends Component {
constructor(props) {
super(props);
this.state = {
racerCurrentPosition: {
top: 60,
left:150
},
racerDegree: 0,
};
}
componentDidMount() {
}
handleObstacleCheck(position, racerPosition) {
let obstacleFound = false;
obstacleFound = this.props.obstacles.map((obstacle) => {
let returnValue = false;
let obstacleRect = document.getElementById(obstacle.key).getBoundingClientRect();
if( position.right >= obstacleRect.left && position.right <= obstacleRect.right && racerPosition.top >= obstacleRect.top && racerPosition.bottom <= obstacleRect.bottom) {
returnValue = true;
}
return returnValue;
});
let isObstacleFound = false;
if(obstacleFound.indexOf(true) !== -1) {
isObstacleFound = true;
}
return isObstacleFound;
}
handleRacerPositionChange(position) {
this.setState({
racerCurrentPosition: position,
});
}
handleRacerDegreeChange(newDegree) {
this.setState({
racerDegree: newDegree,
});
}
render() {
return (
<TrackImage key={uuidv1()}
id="track"
width={this.props.width}
height={this.props.height}>
<Racer key={uuidv1()}
position={this.state.racerCurrentPosition}
onRacerPositionChange={this.handleRacerPositionChange.bind(this)}
degree={this.state.racerDegree}
onRacerDegreeChange={this.handleRacerDegreeChange.bind(this)}
obstacleFound={this.state.obstacleFound}
trackWidth={this.props.width}
trackHeight={this.props.height}
onObstacleCheck={this.handleObstacleCheck.bind(this)}
/>
{
this.props.obstacles.map((obstacle) => {
return (
<Obstacle key={obstacle.key}
id={obstacle.key}
position={obstacle.position}
width={obstacle.width}
height={obstacle.height}
/>
);
})
}
</TrackImage>
);
}
}
export default Track;
Racer.js
import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import HelperDistance from './helpers/distance.js';
import HelperCenterCar from './helpers/centerCar.js';
import racerImage from '../images/racer.png';
const uuidv1 = require('uuid/v1');
class Racer extends Component {
constructor(props) {
super(props);
this.state = {
key: uuidv1(),
intervalId: 0,
speed: 0,
helperForLeftPositioning: 0,
helperForTopPositioning: 0,
isMoving: false,
collision: false,
centerOfCarCoordinates: {
x: 25,
y: 12.5
},
obstacleFound: false,
};
this.start = this.start.bind(this);
this.move = this.move.bind(this);
}
componentDidMount() {
if(this.state.intervalId === 0) {
this.start();
}
}
componentWillUnmount() {
window.clearInterval(this.state.intervalId);
}
start() {
this.setState({
speed: 3,
isMoving: true,
}, () => {
this.createInterval();
});
}
stop() {
this.setState({
speed: 0,
isMoving: false,
}, () => {
window.clearInterval(this.state.intervalId);
});
}
move() {
if(this.state.obstacleFound === true) {
let newDegree;
if(this.props.degree === 0) {
newDegree = 360;
}
newDegree--;
this.props.onRacerDegreeChange(newDegree);
}
this.step();
}
step() {
if(this.state.isMoving) {
//...calculate new position
this.setState({
helperForTopPositioning: helperForTopPositioning,
helperForLeftPositioning: helperForLeftPositioning,
},() => {
let position = {
left: positionNewLeft,
top: positionNewTop
};
this.props.onRacerPositionChange(position);
});
}
}
createInterval = () => {
let intervalId = window.setInterval(() => {
this.move();
console.log("IntervalId: " + intervalId);
},100);
this.setState({
intervalId: intervalId,
})
}
handleDistanceChange(position) {
let racerRect = document.getElementById(this.state.key).getBoundingClientRect();
let obstacleFound = this.props.onObstacleCheck(position, racerRect);
if(this.state.obstacleFound !== obstacleFound) {
this.setState({
obstacleFound: obstacleFound
});
}
}
render() {
return (
<Fragment>
<Car key={this.state.key} id={this.state.key} position={this.props.position} degree={this.props.degree}>
<HelperCenterCar key={uuidv1()} position={this.state.centerOfCarCoordinates} degree={this.props.degree} />
<HelperDistance key={uuidv1()} onChange={this.handleDistanceChange.bind(this)} position={this.state.centerOfCarCoordinates} degree={this.props.degree} />
</Car>
</Fragment>
);
}
}
export default Racer;
The HelperCenterCar and HelperDistance are components, which helps to identify, if there is an obstacle in the way. I'll post just the code of HelperDistance, because here instantly state updates are fired.
HelperDistance.js
import React, { Component } from 'react';
import styled from 'styled-components';
const uuidv1 = require('uuid/v1');
class HelperDistance extends Component {
constructor(props) {
super(props);
this.state = {
key: uuidv1(),
};
}
componentDidMount() {
this.handleOnChange();
}
componentDidUpdate(prevProps, prevState, snapshot) {
this.handleOnChange();
}
handleOnChange() {
let position = document.getElementById(this.state.key).getBoundingClientRect();
this.props.onChange(position);
}
render() {
return (
<Line id={this.state.key} key={this.state.key} position={this.props.position} degree={this.props.degree} />
);
}
}
export default HelperDistance;

How do I use the props in order to create a condition in ReactJS where I am able to change the state of my app

I have two components, the parent "App" component and the Hero component which contains an image and left and right arrow.
I want to use the right arrow to move the imageIndex + 1 until it reaches the images.length, and I want to have the left arrow to have a condition that I can't subtract if imageIndex = 0.
So something like: ( This part of the code is not added in my code yet because I keep getting undefined)
if (this.props.imageIndex > 0) {
this.setState({
// decrease the imageIndex by 1
})
}
if (this.props.imageIndex < this.props.images.length - 1){
this.setState({
// increase the imageIndex by 1
})
}
will be the condition or something like it.
App.jS (Parent Component)
export default class App extends Component {
constructor() {
super();
this.state = {
language: "english",
render: 'overview',
imageIndex: 0,
}
}
render() {
// to make sure the state changes
console.log(this.state.language)
const {render} = this.state
return <Fragment>
<Hero imageIndex = {this.state.imageIndex} />
</Fragment>;
}
}
How would I add that in my Hero Component which contains this code:
Hero.js
class Hero extends Component {
constructor(props) {
super(props);
this._ToggleNext = this._ToggleNext.bind(this);
}
_ToggleNext(props) {
console.log(this.props.listing.images.length)
console.log(this.props.imageIndex)
}
_TogglePrev(props) {
console.log(this.props.listing.images.length)
console.log(this.props.imageIndex)
}
render() {
const { listing: { images = [], name, location = {} } = {} } = this.props;
return <div className="hero">
<img src={images[0]} alt="listing" />
<a onClick={this._TogglePrev}) className="hero__arrow hero__arrow--left">◀</a>
<a onClick={this._ToggleNext} className="hero__arrow hero__arrow--right">▶</a>
<div className="hero__info">
<p>{location.city}, {location.state}, {location.country}</p>
<h1>{name}</h1>
</div>
</div>;
}
}
const getHero = gql`
query getHero {
listing {
name
images
location {
address,
city,
state,
country
}
}
}
`;
export default function HeroHOC(props) {
return <Query
query={getHero}
>
{({ data }) => (
<Hero
{...props}
listing={data && data.listing || {}} // eslint-disable-line no-mixed-operators
/>
)}
</Query>;
}

One solution is to define the data and functionality in the parent component, in this case App, and pass those down as props to the child which will focus on the rendering.
(code not tested but should give you the basic idea)
class App extends Component {
state = {
imageIndex: 0,
listing: {
images: ['foo.jpg', 'bar.jpg'],
name: 'foo',
location: {...}
}
}
_ToggleNext = () => {
const { imageIndex, listing } = this.state;
if (imageIndex === listing.images.length - 1) {
this.setState({imageIndex: 0});
}
}
_TogglePrev = () => {
const { imageIndex, listing } = this.state;
if (imageIndex === 0) {
this.setState({imageIndex: listing.images.length - 1});
}
}
render() {
return (
<Fragment>
<Hero
listing={this.state.listing}
imageIndex={this.state.imageIndex}
toggleNext={this._ToggleNext}
togglePrev={this._TogglePrev}
/>
</Fragment>
);
}
}
Hero component:
const Hero = props => {
const { listing, imageIndex, togglePrev, toggleNext } = props;
return (
<div className="hero">
<img src={listing.images[imageIndex]}/>
<a onClick={togglePrev})>◀</a>
<a onClick={toggleNext}>▶</a>
<div className="hero__info">
...
</div>
</div>
);
};

I want to enable pagination in my elasticsearch results by adding new page of results below the older one in React Js

I am Building an UI (using ReactJs) for a search engine (using elasticsearch) and it returns 20 results per page.
When I click next button, it gives out next 20 results but old results are replaced by the new one. All I want is that the new results should be appended to the old results.
here is my code :
import React from 'react'
import SearchResults from './searchresults';
import elasticsearch from 'elasticsearch';
let client = new elasticsearch.Client({
host: 'localhost:9200',
log: 'trace'
})
var size = 20;
var from_size = 0;
var search_query = '*'
class Searchbox extends React.Component {
constructor(props) {
super(props);
this.state = { results: [], notFound: true }
this.handleChange = this.handleChange.bind(this);
this.next = this.next.bind(this);
this.prev = this.prev.bind(this);
this.er = this.er.bind(this);
this.esSearch = this.esSearch.bind(this);
}
componentWillMount() {
search_query = '*';
this.esSearch(search_query, from_size);
}
handleChange ( event ) {
search_query = event.target.value + '*';
from_size = 0;
this.esSearch(search_query, from_size);
}
next() {
from_size += size;
if(from_size<=size) {
console.log(from_size);
console.log(search_query);
this.esSearch(search_query, from_size);
}
else {
this.er();
from_size -= size;
}
}
er() {
alert("NO MORE PAGES");
}
esSearch( sq, from ) {
var search_query = sq;
client.search({
index: 'photos',
type: 'photo',
q: search_query,
size: size,
from: from
}).then(function ( body ) {
if(body.hits.max_score===null) {
this.setState({notFound: true})
}
else {
this.setState({notFound: false})
}
this.setState({ results: body.hits.hits })
}.bind(this), function ( error ) {
console.trace( error.message );
});
}
renderNotFound() {
return <div className="notFound">Not found. Try a different search.</div>;
}
renderPosts() {
return(
<div className="results">
<SearchResults key={this.from_size} results={ this.state.results } />
<button id="prev" type="button" className="btn btn-primary" onClick={this.prev} >Prev</button>
</div>
)
}
render() {
const { notFound } = this.state;
return (
<div>
<input id="search" className="form-control form" type="text" placeholder="Start Searching" name="search" onChange={ this.handleChange }></input>
<div>
{notFound ? this.renderNotFound() : this.renderPosts()}
</div>
</div>
)
}
}
export default Searchbox;
This app by default, shows all the results.

Inside your esFunction, you could try something like this:
let oldState = this.state.results.slice();
body.hits.hits.forEach(function (searchResult) {
oldState.push(searchResult)
});
this.setState({
results: oldState
});
There is a SO post that talks about this topic.
More details at Facebook React page.