Develop Reference

Semantic UI modal onOpen/onClose not working

I want to let the modal close itself after 3000ms.
But the onOpen callback is not called at all when the modal is open.
Is there a workaround for this?
I put console.log in onOpen and onClose, but nothing is appearing in the console.
import React, { Component } from 'react'
import { Modal, Button, Header } from 'semantic-ui-react'
export default class YourTurnModal extends Component {
constructor(props) {
super(props)
this.state = {
modalState: this.props.isYourTurn,
}
this.handleOpen = this.handleOpen.bind(this)
this.handleClose = this.handleClose.bind(this)
}
componentWillReceiveProps(nextProps) {
this.setState({ modalState: nextProps.isYourTurn })
}
render() {
return (
<div>
<Modal
onOpen={() => {
console.log("Open", this.state.modalState);
this.setState({
modalState: true
},()=>{
setTimeout(() => {this.setState({ modalState: false });}, 3000);});
}}
open={this.state.modalState}
onClose={() => {this.setState({ modalState: false });console.log("here")}}
>
<Modal.Content style={{ borderless: 'true' }}>
<Header>
Your turn!
</Header>
<Button
color="green"
onClick={() => {this.setState({ modalState: false })}}>
close
</Button>
</Modal.Content>
</Modal>
</div>
)
}
}
I tried with:
<YourTurnModal isYourTurn={true} />

passing image from list(stateless) component to display(stateful) component --react

//ImagePlayer component
class ImagePlayer extends Component {
constructor(props) {
super(props)
this.state = {
image: [],
selectedImage: '',
}
this.handleImageSelection = this.handleImageSelection.bind(this);
}
handleImageSelection(source){
this.setState({ImageList : source})
}
render() {
return (
<Grid container spacing={3}>
<Grid item xs={8}>
<Paper>
{/* this is the larger div where I want to render the image clicked on the list */}
<ImageList handleImageSelection={this.handleImageSelection}/>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper>
<ImageList />
</Paper>
</Grid>
</Grid>
);
}
}
//ImageList component
onst ImageList = (handleImageSelection) =>{
handleImageSelection=(image)=>{
console.log(image);
}
return(
images.map((image, id) =>
<List>
<ListItem key={id} >
<div>
<ListItemAvatar>
{<img src= {require(`../assets/${image.name}.jpeg`)} alt="thumbnail" onClick={()=>handleImageSelection(require(`../assets/${image.name}.jpeg`))}/>}
</ListItemAvatar>
</div>
<div >)
How to render the image from List component to Class component in React? My list component is list of images and that should appear enlarged in class component when I click on any image on the list.
I first defined the state: this.state ={ imageSelected: ''}
then, setState for the same.
Also passed handleImageSelection as a function in list component, but it says
'handleImageSelection' is not a function
onClick={()=> props.handleImageSelection()} //errr: not a function

If both your list and display component are wrapped by common parent, you may lift necessary state (e.g. chosen image id) as follows:
const { Component } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const imageList = [
{id:0, name: 'circle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPjwvc3ZnPg==`},
{id:1, name: 'triangle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTAsMCBMMTAwLDEwMCBMMCwxMDAgeiIvPjwvc3ZnPg==`},
{id:2, name: 'square', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCwwIGgxMDAgdjEwMCBoLTEwMCB6Ii8+PC9zdmc+`},
]
const List = ({images, onSelect}) => (
<ul>
{
images.map(({imgSrc, name, id}) => (
<li key={id} onClick={() => onSelect(id)}>
<img className="thumbnail" src={imgSrc} alt={name}/>
</li>
))
}
</ul>
)
class Display extends Component {
render (){
const {imgSrc,name} = this.props.image
return (
<img className="fullsize" src={imgSrc} alt={name} />
)
}
}
class App extends Component {
state = {
chosenImg: null
}
images = imageList
onSelect = _id => this.setState({
chosenImg: this.images.find(({id}) => id == _id)
})
render(){
return (
<div>
<List images={this.images} onSelect={this.onSelect} />
{ this.state.chosenImg && <Display image={this.state.chosenImg} />}
</div>
)
}
}
render (
<App />,
rootNode
)
.thumbnail {
max-width: 50px;
cursor: pointer;
}
.fullsize {
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

The React.js app sends multiple POST requests instead of a single request

I am developing React.js user interface that sends requests to the Django backend. The problem is that the React.js app sends multiple requests to the backend on a button click event and page reload event.
But I want to send just a single request when a button Predict is clicked in BottomControls.js. What is wrong in my code?
BatchFlights.js
import React, { Component, Fragment } from 'react';
import TopControls from "./layout/batch/TopControls"
import MainContent from "./layout/batch/MainContent"
import BottomControls from "./layout/batch/BottomControls"
import styles from "./layout/styles/styles";
import { withStyles } from "#material-ui/core/styles";
class BatchFlights extends Component {
constructor(props) {
super(props);
this.state = {
csvData: [],
holdingTime: 0,
prediction: 0,
labelWidth: 0
};
this.handleChange = this.handleChange.bind(this);
};
componentDidMount() {
this.fetchData();
};
updateDelay(prediction) {
this.setState(prevState => ({
prediction: prediction
}));
};
setCsvData = csvData => {
this.setState({
csvData
}, () => {
console.log(JSON.stringify(csvData))
});
}
fetchData = () => {
fetch("http://localhost:8000/batch_predict", {
method: "POST",
headers: {
'Accept': 'application/jsonp, text/plain, */*',
//'Content-Type': 'application/json'
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" // otherwise $_POST is empty
},
body: JSON.stringify({
holdingTime: this.state.holdingTime,
csvData: this.state.csvData
})
})
.then((resp) => {
return resp.json()
})
.then((data) => {
this.updateDelay(data.prediction)
})
.catch((error) => {
console.log(error, "catch the hoop")
})
};
handleChange = (name, event) => {
this.setState({
[name]: event.target.value
}, () => {
console.log("plannedDep",this.state.plannedDep)
});
};
handleReset = () => {
this.setState({
prediction: 0
});
};
render() {
return (
<Fragment>
<TopControls state={this.state} styles={this.props.classes} handleChange={this.handleChange} />
<MainContent state={this.state} styles={this.props.classes} setCsvData={this.setCsvData} />
<BottomControls state={this.state} styles={this.props.classes} fetchData={this.fetchData} handleReset={this.handleReset}/>
</Fragment>
);
}
}
const StyledBatchFlights = withStyles(styles)(BatchFlights);
export default StyledBatchFlights;
CSVDataTable.js
import React, { Component } from 'react';
import { CsvToHtmlTable } from 'react-csv-to-table';
import ReactFileReader from 'react-file-reader';
import Button from '#material-ui/core/Button';
const sampleData = `
NUM,AIRLINE_ARR_ICAO,WAKE,SIBT,SOBT,PLANNED_TURNAROUND,DISTANCE_FROM_ORIGIN,DISTANCE_TO_TARGET
1,VLG,M,2016-01-01 04:05:00,2016-01-01 14:10:00,45,2000,2000
2,VLG,M,2016-01-01 04:05:00,2016-01-01 14:10:00,45,2000,2000
`;
class CSVDataTable extends Component {
state={
csvData: sampleData
};
handleFiles = files => {
var reader = new FileReader();
reader.onload = (e) => {
// Use reader.result
this.setState({
csvData: reader.result
})
this.props.setCsvData(reader.result)
}
reader.readAsText(files[0]);
}
render() {
return <div>
<ReactFileReader
multipleFiles={false}
fileTypes={[".csv"]}
handleFiles={this.handleFiles}>
<Button
variant="contained"
color="primary"
>
Load data
</Button>
</ReactFileReader>
<CsvToHtmlTable
data={this.state.csvData || sampleData}
csvDelimiter=","
tableClassName="table table-striped table-hover"
/>
</div>
}
}
export default CSVDataTable;
BottomControls.js
import React, { Component, Fragment } from 'react';
import CssBaseline from '#material-ui/core/CssBaseline';
import Grid from '#material-ui/core/Grid';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardContent from '#material-ui/core/CardContent';
import AppBar from '#material-ui/core/AppBar';
import Button from '#material-ui/core/Button';
import Icon from '#material-ui/core/Icon';
class BottomControls extends Component {
render() {
return (
<Fragment>
<CssBaseline />
<AppBar position="fixed" color="primary" className={this.props.styles.appBar}>
<div className={this.props.styles.toolbar}>
<Grid container spacing={24}>
<Grid item xs={6} sm={3}>
<Button variant="contained" color="primary" onClick={this.props.fetchData} className={this.props.styles.button}>
Predict
<Icon className={this.props.styles.rightIcon}>send</Icon>
</Button>
<Button variant="contained" color="primary" onClick={this.props.handleReset} className={this.props.styles.button}>
Reset
<Icon className={this.props.styles.rightIcon}>clear</Icon>
</Button>
</Grid>
<Grid item xs={6} sm={2}>
<Card className={this.props.styles.predictedDelay}>
<CardActionArea>
<CardContent>
<div className={this.props.styles.predictedDelayText}>
Prediction: {this.props.state.prediction} <span> </span>
</div>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
</div>
</AppBar>
</Fragment>
);
}
}
export default BottomControls;

Maybe is because your binding an arrow function, this.handleChange, but I don't see any problem besides that

I deleted this:
componentDidMount() {
this.fetchData();
};
Now the request is sent only on a button click. It is not sent on a page reload.

React JS Sortable Form Fields as Components

I'm trying to develop a fairly simplistic E-Mail template creator with React JS. I'm using the "react-sortable-hoc" library as a means to handle the ordering of elements on the page.
The goal is to allow users to create "Rows", rearrange rows, and within each row, have multiple "Columns" that can contain components like images, textboxes, etc...
But I keep running into the same issue with Sortable libraries. Form fields cannot maintain their own "state" when being dragged up or down. The State of a Component in React JS seems to be lost when it's in a draggable component. I've experienced similar issues with JQuery UI's Sortable but it required an equally ridiculous solution. Is it common to find that form fields are simply super difficult to rearrange?
As a "proof of concept", I am using a complex JSON object that stores all the information in the Letter.js component and passes it down as Props which are then passed down to each component. But as you can tell, this is becoming cumbersome.
Here is an example of my Letter component that handles the JSON object and sorting of Rows:
import React, {Component} from 'react';
import {render} from 'react-dom';
import {
SortableContainer,
SortableElement,
arrayMove
} from 'react-sortable-hoc';
import Row from './Row';
const SortableItem = SortableElement(({row, rowIndex, onChange, addPart}) => {
return (
<li>
<Row
row={row}
rowIndex={rowIndex}
onChange={onChange}
addPart={addPart} />
</li>
)
});
const SortableList = SortableContainer(({rows, onChange, addPart}) => {
return (
<ul id="sortableList">
{rows.map((row, index) => {
return (
<SortableItem
key={`row-${index}`}
index={index}
row={row}
rowIndex={index}
onChange={onChange}
addPart={addPart}
/> )
})}
</ul>
);
});
class Letter extends Component {
constructor(props) {
super(props);
this.state = {
rows: [],
}
this.onSortEnd = this.onSortEnd.bind(this);
this.onChange = this.onChange.bind(this);
this.addRow = this.addRow.bind(this);
this.addPart = this.addPart.bind(this);
}
addPart(event, index, value, rowIndex, columnIndex) {
console.log(value);
var part = {};
if(value === 'Text') {
part = {
type: 'Text',
value: ''
}
} else if(value === 'Image') {
part = {
type: 'Image',
value: ''
}
} else {
part = {
type: 'Empty',
}
}
const { rows } = this.state;
rows[rowIndex][columnIndex] = part;
this.setState({ rows: rows })
}
onChange(text, rowIndex, columnIndex) {
const { rows } = this.state;
const newRows = [...rows];
newRows[rowIndex][columnIndex].value = text;
this.setState({ rows: newRows });
}
addRow(columnCount) {
var rows = this.state.rows.slice();
var row = [];
for(var i = 0; i < columnCount; i++) {
var part = {
type: 'Empty',
}
row.push(part);
}
rows.push(row);
this.setState({ rows: rows })
}
onSortEnd = ({oldIndex, newIndex}) => {
this.setState({
rows: arrayMove(this.state.rows, oldIndex, newIndex),
});
};
render() {
console.log(JSON.stringify(this.state.rows));
const SideBar = (
<div className="sideBar">
<h3>Add a Row</h3>
<button className="uw-button" onClick={() => this.addRow(1)}>1 - Column</button><br/><br/>
<button className="uw-button" onClick={() => this.addRow(2)}>2 - Column</button><br/><br/>
<button className="uw-button" onClick={() => this.addRow(3)}>3 - Column</button>
<hr />
</div>
);
if(this.state.rows.length <= 0) {
return (
<div className="grid">
<p>This E-Mail is currently empty! Add some components to make a template.</p>
{SideBar}
</div>
)
}
return (
<div className="grid">
<SortableList
rows={this.state.rows}
onChange={this.onChange}
addPart={this.addPart}
lockAxis="y"
useDragHandle={true}
onSortStart={this.onSortStart}
onSortMove={this.onSortMove}
onSortEnd={this.onSortEnd}
shouldCancelStart={this.shouldCancelStart} />
{SideBar}
</div>
);
}
}
export default Letter;
And here is an example of Row:
import React, { Component } from 'react';
import { Text, Image } from './components/';
import { SortableHandle } from 'react-sortable-hoc';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
const DragHandle = SortableHandle(() => <span className="dragHandle"></span>);
class Row extends Component {
constructor(props) {
super(props);
}
render() {
if(this.props.row !== undefined && this.props.row.length > 0) {
const row = this.props.row.map((column, columnIndex) => {
if(column.type === 'Empty') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="emptyColumn">
<Card>
<DragHandle />
<CardTitle title="Empty Component"/>
<DropDownMenu value={"Empty"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
</Card>
</div>
</MuiThemeProvider>
)
} else if(column.type === 'Text') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="textColumn">
<Card>
<DragHandle />
<CardTitle title="Textbox"/>
<DropDownMenu value={"Text"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
<Text
value={this.props.row[columnIndex].value}
onChange={this.props.onChange}
columnIndex={columnIndex}
rowIndex={this.props.rowIndex} />
</Card>
</div>
</MuiThemeProvider>
)
} else if(column.type === 'Image') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="textColumn">
<Card>
<DragHandle />
<CardTitle title="Image"/>
<DropDownMenu value={"Image"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
<Image
columnIndex={columnIndex}
rowIndex={this.props.rowIndex} />
</Card>
</div>
</MuiThemeProvider>
)
}
})
return (
<div className="row">
{row}
</div>
)
}
return <p>No components</p>;
}
}
export default Row;
Lastly, this is what Text.js looks like
import React, { Component } from 'react';
import ReactQuill from 'react-quill';
class Text extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ReactQuill value={this.props.value}
onChange={(text) => this.props.onChange(text, this.props.rowIndex, this.props.columnIndex)} />
)
}
}
export default Text;
So, I keep having to pass ridiculous parameters to onChange functions and other functions in order to ensure that the state is maintained while sorting and editing. So, how should I be handling this? I don't want Letter.js (which is basically App.js) to handle all of my data handling. I want each component to handle it's own. I want Text.js to handle the onChange effects of its text. But I just can't see a way around passing everything down as props.

Dynamically create menu items

I created an react single page application with the api from NASA Picture of the day. I want to add in a drawer the history of the images displayed but I want to show only it's dates.
I don't know how to create dynamically a list of MenuItem containing this dates. I know only to display the current date.
import React, { Component } from 'react';
import axios from 'axios';
import moment from 'moment';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import {
cyan500, cyan700,
pinkA200,
grey100, grey300, grey400, grey500,
white, darkBlack, fullBlack,
} from 'C:\\Users\\pitig\\Documents\\SPA\\nasaimages\\node_modules\\material-ui\\styles\\colors';
import logo from './NASA_logo.png';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
controlledDate: moment(),
image: {}
};
}
handleToggle = () => this.setState({ open: !this.state.open });
handleClose = () => this.setState({ open: false });
componentWillMount() {
this.getImage(this.state.controlledDate);
}
getImage = (date) => {
axios({
url: 'https://api.nasa.gov/planetary/apod',
method: 'get',
params: {
api_key: 'qreJekgvmqSs2lqss9dlk2RGveoViwHvXV4T6wlG',
date: date.format('YYYY-MM-DD'),
},
}).then(response => response.data)
.then((image) => {
this.setState({
image: image
})
});
}
handleChange = (event, date) => {
this.setState({
controlledDate: moment(date),
});
this.getImage(moment(date));
};
onNext = (event) => {
const current = this.state.controlledDate;
const date = current.add(1, 'days');
this.setState({
controlledDate: date
});
this.getImage(moment(date));
}
onPrevious = (event) => {
const current = this.state.controlledDate;
const date = current.subtract(1, 'days');
this.setState({
controlledDate: date
});
this.getImage(moment(date));
}
render() {
var muiTheme = getMuiTheme({
palette: {
primary1Color: '#135DAE',
primary2Color: cyan700,
primary3Color: grey400,
accent1Color: '#EF243A',
accent2Color: grey100,
accent3Color: grey500,
},
appBar: {
height: 50,
},
})
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div className="App">
<AppBar
title="NASA: Image of the day"
iconClassNameRight="muidocs-icon-navigation-expand-more"
onLeftIconButtonTouchTap={this.handleToggle}
/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to NASA: Image of the day</h1>
</header>
<p className="App-intro">
Pick the date you want.
</p>
<DatePicker
hintText="Selected day"
value={this.state.controlledDate.toDate()}
onChange={this.handleChange}
autoOk
/>
<RaisedButton
label="Previous"
secondary={true}
onClick={this.onPrevious}
/>
<RaisedButton
label="Next"
primary={true}
onClick={this.onNext}
/>
<h1>{this.state.image.title}</h1>
<img src={this.state.image.url} />
<div>
<Drawer
docked={false}
width={200}
open={this.state.open}
onRequestChange={(open) => this.setState({ open })}
>
<MenuItem onClick={this.handleClose}>{this.state.image.date}</MenuItem>
</Drawer>
</div>
</div>
</MuiThemeProvider>
);
}
}
export default App;

Make history of dates to Array as state then when you get image, add image date to that array.
And display like this.
<Drawer
docked={false}
width={200}
open={this.state.open}
onRequestChange={(open) => this.setState({ open })}
>
{this.state.history.map((el,index)=>{
return <MenuItem key={index} onClick={this.handleClose}>{el}</MenuItem>;
}
}
</Drawer>