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.
Related
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)
I'm building a page with react-bootstrap and wanted to place an image as a background for one of the rows that I have in my grid. The height of the img is 1237.5px and it's placed in the Col Component. If I change the height explicitly to e.g. height: 25%, the image takes 25% of the height of the Row component but the Row component is still 1237.5px high.
I'd like Row component to have height: 30% of the desktop screen. It should be responsive and on mobile it should take the whole screen height.
function App() {
return (
<div className="App">
<UpperBar></UpperBar>
<Container fluid>
<Row >
<Col xs={12} md={12} >
<FirstBlock></FirstBlock>
</Col>
</Row>
<Row>
<Col xs={12} md={6}>1 of 2</Col>
<Col xs={12} md={6}>2 of 2</Col>
</Row>
<Row>
<Col xs={12} md={6}>1 of 2</Col>
<Col xs={12} md={6}>2 of 2</Col>
</Row>
</Container>
<Footer></Footer>
</div >
);
}
function FirstBlock() {
return (
<Image src={discolight} alt="first" style={{height: "25%", width: "100%"}}></Image>
);
}
enter image description here
I'm trying to get the animation on .skill-logo to start playing at random times for each version.
React needs inline styles to be passed as an object. Which is what I have done here. Any ideas as to where to assign the randomness?
const Skills = () => {
let skillLogoStyle = {
animationDelay: Math.random() + 's',
};
return (
<Row className="skills-container">
<Col xs={12} mdOffset={2} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={html} alt="HTML5 Logo"/></Col>
<Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={css} alt="HTML5 Logo"/></Col>
<Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={js} alt="HTML5 Logo"/></Col>
<Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={react} alt="HTML5 Logo"/></Col>
<Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={node} alt="HTML5 Logo"/></Col>
</Row>
);
}
You could try creating a function that will return a random animationDelay and then call it for each element in render.
returnRandom = () => {
let random = Math.random()*10;
return {animationDelay: Math.random() + 's'}
and then in render set style to that function
<Col style = {returnRandom()}
Then each would have a different animation delay, which is what I am assuming you want.
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
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