Develop Reference

React Google Charts are minimazing for each switch tab change in tab component

I have built the following Tab component with one tab containing Google charts.
Tab component
return (
<Tabs
defaultActiveKey={activeKey}
items={items}
activeKey={activeKey}
onChange={onKeyChange}
/>
);
Tab with charts
return (
<div>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} xs={24} style={colStyle}>
<Box title={configs.BarChart.title}>
<ContentHolder>
<GoogleChart {...configs.BarChart} chartEvents={chartEvents} />
</ContentHolder>
</Box>
</Col>
<Col md={12} xs={24} style={colStyle}>
<Box title={configs.lineChart.title}>
<ContentHolder>
<GoogleChart {...configs.lineChart} />
</ContentHolder>
</Box>
</Col>
</Row>
</div>
);
Initial view is ok but each time when I change the current tab and later switch to previous the area of chart is smallifying.
First render (OK)
Second render (Smallifying)

Avoid elements to move separately on browser resize in a React Form

I'm struggling with the following form done in React:
import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import { Container, Row, Col, InputGroup, Button, FormControl, Form } from 'react-bootstrap';
const images = [
{
original: '/assets/images/products/colgantes.png',
thumbnail: '/assets/images/products/colgantes#0.25x.png',
},
{
original: '/assets/images/products/corazones.png',
thumbnail: '/assets/images/products/corazones#0.25x.png',
},
{
original: '/assets/images/products/take-me-to-the-beach.png',
thumbnail: '/assets/images/products/take-me-to-the-beach#0.25x.png',
},
];
class DetailedProduct extends Component {
render() {
return (
<>
<Container fluid>
<Row >
<Col md={{ span: 4, offset: 3 }} sm={{ span: 12, offset: 0}} >
<ImageGallery
items={images}
showNav=""
showFullscreenButton=""
showBullets=""
showPlayButton=""
thumbnailPosition="left"
/>
</Col>
<Col md={3} sm={12} className="text-xs-center text-md-left" >
<h1>Product</h1>
<h3>$500</h3>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industrys</p>
<Form>
<Row >
<Col sm={12} md={8} >
<Form.Group controlId="color" >
<Form.Label>Color</Form.Label>
<Form.Control as="select" custom>
<option>Rojo</option>
<option>Negro</option>
<option>Azul</option>
</Form.Control>
</Form.Group>
</Col>
<Col sm={12} md={4} className="inline-block">
<Form.Group controlId="cantidad" >
<Form.Label>Cantidad</Form.Label>
<InputGroup >
<InputGroup.Prepend>
<Button variant="outline-secondary" >+</Button>
</InputGroup.Prepend>
<FormControl
placeholder="1"
aria-label="quantity"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary" >-</Button>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Col>
</Row>
</Form>
</Col>
</Row>
</Container>
</>
);
}
}
export default DetailedProduct;
The problem I have is that when I resize the Browser Window, the appended buttons in the input, start to move down to a different row separately, breaking the [+ 1 -] block. I've tried applying different CSS to the form group but I can't find a way to tighten them together so that if they move, they move in a block and the following thing doesn't happen:

You can try adding the rule for the minimum size:
min-width: 150px;
150px is an example size.
Unfortunately I don't know the width size that input should have.
To the class that contains the three elements, input-group, in that case. I advise you to add a class and apply additional styles to that.

Thanks, I was able to fix it by using the right flex column sizes for the scren resolution, sm={12} md={6} lg={4} - That did the trick

React-Bootstrap <Row> incorrect height

I am trying to create a two column layout, with the left column a fixed height, and the right column containing another Grid with multiple rows.
However, the first row in the second column is always the height of the left column.
Here's the output:
Here is my code:
class App extends Component {
render() {
return (
<div>
<Grid fluid >
<Row>
<Col xs={2} style={{ padding: '0px', backgroundColor: 'lightblue', height: '200px' }}>
Column 1 <br/>I am a 200 px tall column</Col>
<Col xsOffset={2}>
<Grid>
<Row style={{backgroundColor: 'red'}}>
Column 2 <br/> Why am I so tall???
</Row>
<Row style={{backgroundColor: 'green'}}>
I am too far down!
</Row>
<Row style={{backgroundColor: 'lightgray'}}>
Me, too!
</Row>
</Grid>
</Col>
</Row>
</Grid>
</div>
);
}
}
And a fiddle: https://jsfiddle.net/TimoF/dwLhb1fz/

Replace xsOffset={2} with xs={10}
Why was it happening?
According to Bootstrap Grid System, adjacent <div> with pseudo class .row::before is having display:table,by default.
Had to dive deep into Bootstrap CSS ;)
Hence it will force adjacent <div> to be of equal height. Check this
In your case, it's not necessary to give offset, and it's more convenient to replace xsOffset={2} with xs={10}.
Hence it will work fine as it's standard Bootstrap's way.
var { Grid, Row, Col } = ReactBootstrap
class App extends React.Component {
render() {
return (
<Grid fluid >
<Row>
<Col xs={2} style={{ backgroundColor: 'lightblue', height: '200px' }}>
Column 1 <br/>I am a 200 px tall column</Col>
<Col xs={10}>
<Row>
<Grid>
<Row style={{backgroundColor: 'red',height:'auto'}}>
Column 2 <br/> Why am I so tall???
</Row>
<Row style={{backgroundColor: 'green'}}>
I am too far down!
</Row>
<Row style={{backgroundColor: 'lightgray'}}>
Me, too!
</Row>
</Grid>
</Row>
</Col>
</Row>
</Grid>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('container')
);
<script src="https://unpkg.com/react#16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Check this Fiddle

responsive grid 2 colum in a map

I have this static markup which make my layout flex and 2 column nicely.
<Row>
<Col span={6}>content</Col>
<Col span={6}>content</Col>
</Row>
<Row>
<Col span={6}>content</Col>
<Col span={6}>content</Col>
</Row>
<Row>
<Col span={6}>content</Col>
<Col span={6}>content</Col>
</Row>
But I have to convert it to a dynamic list since it has to render data from the backend.
Doing this won't work
{ads && ads.map((obj, index) => (
<Row>
<Col span={6}>{obj.content}</Col>
</Row>
)
)}
because it will print each row for each iteration. I thought of using %, but I forgot how I did it in the past.

You could use a for loop (not sure that thats the best way... new to JavaScript):
{ads && for(var i = 0; i < ads.length; i += 2) {
<Row>
<Col span={6}>{ads[i]}</Col>
<Col span={6}>{ads[i+1]</Col>
</Row>
}
You would have to figure out how to deal with ads.lenghtnot being divisible by two, though.

React slow with many controlled fields

I've been struggling with this for some time now. I'm creating a huge form and want to use controlled components. The only problem is, it's getting really slow, since my form is being rerendered with every keytroke I make.
Here is the Performance-Measurement for 10 keystrokes in one of my fields:
The React-Class (it's not complete yet):
class OrderEdit extends Component {
constructor(params) {
super(params);
this.state = {
activeTab: 1,
order: null,
customerValue: '',
warningTextCustomer: ''
};
this.loadOrder();
}
loadOrder = () => {
var me = this;
new ApiCall()
.withUrl('orders/edit/' + this.props.serialNumber)
.onSuccess((order) => {
me.setState({
order: order
});
})
.get();
};
validateCustomer = () => {
return;
if (!this.state.order.Customer) {
this.setState({
warningTextCustomer: 'Bitte gib einen Kunden an.'
});
} else {
this.setState({
warningTextCustomer: ''
});
}
};
onCustomerBlur = (event) => {
//this.validateCustomer();
};
onCustomerUpdateItem = (item) => {
var newOrder = this.state.order;
newOrder.Customer = item;
newOrder.Sender = item;
this.setState({
order: newOrder
}, () => this.validateCustomer);
};
onCustomerUpdateValue = (value) => {
this.setState({
customerValue: value
});
};
onSelectTab = (tabIndex) => {
this.setState({
activeTab: tabIndex
});
};
onUpdateDepartureDate = (date) => {
var newOrder = this.state.order;
newOrder.DepartureTimeFrom = date;
this.setState({order: newOrder})
};
render() {
if (!this.state.order) {
return (<Spinner style={{marginTop: '25%'}}/>);
}
return (
<PageContainer>
<PageTitle style={{marginBottom: 40}}
Title={"Auftrag " + this.state.order.SerialNumber + " bearbeiten"}/>
<Tabs activeTab={this.state.activeTab} onSelect={this.onSelectTab}>
<tab tabIndex={1} title="Allgemein">
<Section title="Allgemein">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<AutocompleteFieldCustomer
ref="customer"
title="Kunde"
focusAfterInit={true}
warningText={this.state.warningTextCustomer}
canCreate={true}
value={this.state.customerValue}
valueItem={this.state.order.Customer}
onBlur={this.onCustomerBlur}
onUpdateItem={this.onCustomerUpdateItem}
onUpdateValue={this.onCustomerUpdateValue}
titleElements={this.state.order.Customer.IsNewItem ?
<FieldTitleSuccess title="Kunde wird neu angelegt"/> : null}/>
<FieldNote text="Nicht existierende Kunden werden automatisch angelegt."/>
</Col>
</Row>
</Section>
<Section title="Sendung">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<AutocompleteFieldCustomer
title="Absender + Beladestation"/>
</Col>
</Row>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<LocationField />
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<DateField
title="Datum"/>
</Col>
<Col xs={12} md={6}>
<Row>
<Col xs={12} md={6}>
<TimeField title="Von"/>
</Col>
<Col xs={12} md={6}>
<TimeField title="Bis"/>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col xs={12} md={6}>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<AutocompleteFieldCustomer
title="Empfänger + Entladestation"/>
</Col>
</Row>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<LocationField />
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<TextField title="Datum"/>
</Col>
<Col xs={12} md={6}>
<Row>
<Col xs={12} md={6}>
<TimeField title="Von"/>
</Col>
<Col xs={12} md={6}>
<TimeField title="Bis"/>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
</Section>
<Section title="Fahrt">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldVehicle
title="Fahrzeug"
canCreate={true}/>
</div>
<div style={{marginBottom: 20}}>
<AutocompleteFieldUser
title="Fahrer"
canCreate={true}/>
</div>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldCustomer
title="Frachtführer"
canCreate={true}/>
</Col>
</Row>
</Section>
<Section title="Fakturierung">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldCustomer
title="Rechnungsempfänger Kunde"
canCreate={true}/>
</div>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<TextField title="Auftragspreis"/>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldTax
title="Steuerschlüssel"
canCreate={true}/>
</Col>
</Row>
</Col>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldCustomer
title="Gurtschriftempfänger Frachtführer"
canCreate={true}/>
</div>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<TextField title="Fahrtpreis"/>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldTax
title="Steuerschlüssel"
canCreate={true}/>
</Col>
</Row>
</Col>
</Row>
</Section>
</tab>
<tab tabIndex={2} title="Karte">Tab 3 content</tab>
</Tabs>
</PageContainer>
);
}
}
Does anyone know a solution for this? I've been reading a lot about Pure-Render-Mixin, shouldComponentUpdate, Immutable, but I'm not sure whether any of that would help me here or not.
thanks