Develop Reference

Converting pagination from `react-js-pagination` to` react-bootstrap` pagination

I have a ready pagination component: https://www.npmjs.com/package/react-js-pagination
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 1,
todos: []
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
totalItemsCount={this.state.todos.length}
pageRangeDisplayed={2}
onChange={this.handlePageChange}
/>
</div>
);
}
}
How to transform pagination from react-js-pagination toreact-bootstrap pagination https://react-bootstrap.github.io/components/pagination/ ?

react-bootstrap pagination is just a UI component that renders the pagination items and can't handle the stuff react-js-pagination is handling. It is mentioned in react-js-pagination docs that you can import your own CSS style and use the classes for the pagination items. So just importing bootstrap style is enough and then you can do this:
import "bootstrap/dist/css/bootstrap.min.css";
<ReactPagination
itemClass="page-item"
linkClass="page-link"
hideNavigation
activePage={2}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
/>
Check this Codesandbox: https://codesandbox.io/s/polished-darkness-pm7v8?fontsize=14

I use the react-bhx-pagination because you can get the json, auto load when you get to the end of the page and it's very easy to use and change.
Example: Online demo
Component:
react-bhx-pagination

how to destroy animation in bodymovin react

So I'm trying to destroy the animation in my react app but it is not destroying if I use any event listener I get the errors I don't know why, here is the code
import React, { Component } from 'react';
import './Cool.css';
import data from './data.json';
import ReactBodymovin from 'react-bodymovin';
class AventadorPage extends Component {
render() {
var bodymovinOptions = {
loop: 2,
autoplay: true,
prerender: true,
animationData: data,
}
return (
<div id="main-container">
<div className="animation">
<ReactBodymovin options={bodymovinOptions} />
</div>
</div>
);
}
}
export default AventadorPage;

Handle <select> component change in a ReactJS form

ReactJS n00b, trying to build a simple, reusable < select > component in ReactJS with an onClick callback. I'm not getting any console or webpack errors, but nothing is happening when I change the selected option.
Caster.js
import React from 'react';
import ReactDOM from 'react-dom';
import { SelectSchool } from './SelectSchool';
import { Button } from './Button';
export class Caster extends React.Component {
constructor(props) {
super(props);
...
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e){
console.log('handleChange'); // TEST - nothing appears in console
var value = e.target.value;
this.setState({casterSchool: value});
this.props.select(value);
console.log('value: ' + value); // TEST - nothing appears in console
}
render() {
return (
<div className="instance-wrap">
<div className="input-row">
<SelectSchool phaseSelect="select-caster" onChange={this.handleChange} />
...
</div>
</div>
);
}
}
SelectSchool.js
import React from 'react';
import ReactDOM from 'react-dom';
export class SelectSchool extends React.Component {
render() {
return (
<div className="input-wrap">
<label>School</label>
<select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.handleChange}>
<option value='alteration'>Alteration</option>
...
<option value='divination'>Divination</option>
</select>
</div>
);
}
}
SelectSchool.defaultProps = { phaseSelect: 'default' };
Any help or advice is greatly appreciated.

The name of the prop that you pass to the <SelectSchool in your example is onChange but inside the component you are trying to access this.props.handleChange (there is no such prop).
You should use this.prop.onChange or pass the handleChange={this.handleChange} to the component.
Option 1:
<select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.onChange}>
Option 2:
<SelectSchool phaseSelect="select-caster" handleChange={this.handleChange} />

How to have text dynamically change with React, but not call the change in Render?

I'm trying to build a very simple app with React that will tell you how many days have past since a given date. I am using React, Moments, and ReactJS Datepicker as the foundation of this app for quick implementation.
I'm getting an error when I attempt to pick a date saying
warning.js:44
Warning: setState(...): Cannot update during an existing state transition (such as within 'render' or another component's constructor)
I understand it means I can't have a function update a state I am currently displaying due to render issues, but am having a hard time figuring out how I can get such functionality without updating it in the render method.
This is the current app:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import './App.css';
import 'react-datepicker/dist/react-datepicker.css';
class App extends Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this)
this.state = {
startDate: moment(),
dateDiff: moment(),
dateCheck: false
};
}
handleChange(date) {
this.setState({
startDate: date,
dateCheck: true
});
}
showDiff(date, dateCheck) {
if (dateCheck) {
this.setState({
dateCheck: false,
dateDiff: moment().startOf(date).fromNow()
});
}
}
render() {
return (
<div className="App">
<div className="DatePicker">
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showYearDropdown
dateFormatCalendar="MMMM"
isClearable={true}
placeholderText='Enter A Date' />
</div>
<div>
{this.showDiff(this.state.startDate, this.state.dateCheck)}
</div>
</div>
);
}
}
export default App;
I'm trying to have it update the number of calculated days every time a new date is selected, and thought the dateCheck flag would help, but it didn't.
Thanks

React automatically re-renders parts of the DOM that need updating upon state change. The idea is to tell React what you want it to render, not how you want it to render.
So in your case, if you just want React to render the date difference from now, you need only change startDate when it updates. Here's some code to try to illustrate what I'm suggesting:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import './App.css';
import 'react-datepicker/dist/react-datepicker.css';
class App extends Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this)
this.state = {
startDate: moment()
};
}
handleChange(date) {
this.setState({
startDate: date
});
}
render() {
return (
<div className="App">
<div className="DatePicker">
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showYearDropdown
dateFormatCalendar="MMMM"
isClearable={true}
placeholderText='Enter A Date' />
</div>
<div>
{this.state.startDate.fromNow()}
</div>
</div>
);
}
}
export default App;

React-on-Rails, passing and formatting props?

I'm trying to pass a collection of events objects down to a react-big-calendar component. I'm working from an example, and I'm very close - but there is something I'm missing. It is easier if I explain further with code examples:
Here is where the props are being passed in from the rails view. #events, is an array of event objects. The events will need to be formatted so they can be displayed in big calendar at some point:
<%= react_component("CalendarApp",
props: #events,
prerender: false) %>
This component is being passed to ReactOnRails.register in the following snippet:
import React from 'react';
import Calendar from '../containers/Calendar';
export default (props) => (
<Calendar {...props} />
);
Here is where 'CalendarApp' is being made available in the rails views:
import ReactOnRails from 'react-on-rails';
import CalendarApp from './CalendarAppClient';
ReactOnRails.register({ CalendarApp });
Next, is the Calendar container/smart component. The console.log(this.props) returns the following in the browser console:
Question How do I pass props down so that I can say something like 'this.props.events' in the following 'Calendar' component, and iterate through the list? Formatting the events so they can be passed to the MyCalendar presentation component in the correct format?
import React, { PropTypes } from 'react';
import MyCalendar from '../components/bigCalendar';
import _ from 'lodash';
// Simple example of a React "smart" component
export default class Calendar extends React.Component {
componentDidMount(){
console.log("mounted");
console.log(this.props);
};
render() {
return (
<div>
<MyCalendar events={this.props}/>
</div>
);
}
}
client/app/bundles/HelloWorld/components/bigCalendar.jsx
Ultimately I want to pass #events down to this component, my instinct is to figure out how to format the events in the container component above and pass down properly formatted events to the MyCalendar presentation component. Presently, I am using test data..which is why you see import events from './events';
import React, { PropTypes } from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import events from './events';
BigCalendar.setLocalizer(
BigCalendar.momentLocalizer(moment)
);
const MyCalendar = props => (
<div className="calendar-container">
<BigCalendar
events={events}
scrollToTime={new Date(1970, 1, 1, 6)}
defaultDate={new Date(2015, 3, 12)}
defaultView='month'
defaultDate={new Date(2015, 3, 12)}
/>
</div>
);
export default MyCalendar;

First you need to correct you .erb react_component props
<%= react_component("CalendarApp",
props: {events: #events},
prerender: false) %>
Next you want to pass your this.props as a stringified object from the constructor
constructor(props) {
super(props);
this.state= {
examples: JSON.stringify(this.props.examples)
};
}
Something to that sort if you have an array of events using ES6 syntax you could do loop through this.state
var examples = this.state
examples = this.props.examples.map((example) => {
return(
<div key={example.id}>{example.name}</div>
);
});
Then you'll need to pass your newly created loop where ever you want it
return(
<div class="col-md-10">
{examples}
</div>
);
and bam! you've got it! just remember to pass the data from your .erb controller