Return and render a div in React
15,473
Solution 1
When you render out a div via a function the intendation and placement of the div matters.
renderDiv() {
return (<div>
</div>)
}
Works but not
renderDiv() {
return
(<div>
</div>)
}
Solution 2
call returnDiv, also keep your returned multiline jsx inside parenthesis, else it might return null;
import React, { Component } from 'react'
import ProgressBar from './ProgressBar'
require('styles/_servicesPage/priceCalc.css')
export default class PriceCalculator extends Component {
componentWillMount() {
this.state = {
arr: []
}
}
minimizeDiv() {
this.props.toggleDiv(false)
}
returnDiv(){
return (
<div>
<p>
Printing out text!
</p>
</div>
)
}
render() {
var styleVar = {
backgroundImage: 'url(assets/images/services/pricecalc_blue_bg.svg)',
backgroundPosition: 'right center'
}
var returnDiv = this.returnDiv();
return (
<div className="service-form" id="priceCalc" style={styleVar}>
<div>
<h1>Priskalkyl för badrum</h1>
<p>
Välkommen att fylla i formuläret,
så är du ett steg närmare dina drömmars badrum.
</p>
</div>
{returnDiv}
<div onClick={this.minimizeDiv.bind(this)} className="minimizeBorder">
<img src="assets/arrows/minimizeArrow.svg"/>
<p>Minimera</p>
<img src="assets/arrows/minimizeArrow.svg"/>
</div>
</div>
)
}
}
Author by
AlfredOdling
Updated on June 04, 2022Comments
-
AlfredOdling almost 2 years
Im trying to return a div dynamically from a function in react. Im calling a function to render out directly in the components render function, but it does not render out. Im sure its a simple error in the code but I cant spot it.
The code:
import React, { Component } from 'react' import ProgressBar from './ProgressBar' require('styles/_servicesPage/priceCalc.css') export default class PriceCalculator extends Component { componentWillMount() { this.state = { arr: [] } } minimizeDiv() { this.props.toggleDiv(false) } returnDiv(){ return <div> <p> Printing out text! </p> </div> } render() { var styleVar = { backgroundImage: 'url(assets/images/services/pricecalc_blue_bg.svg)', backgroundPosition: 'right center' } return ( <div className="service-form" id="priceCalc" style={styleVar}> <div> <h1>Priskalkyl för badrum</h1> <p> Välkommen att fylla i formuläret, så är du ett steg närmare dina drömmars badrum. </p> </div> {this.returnDiv} <div onClick={this.minimizeDiv.bind(this)} className="minimizeBorder"> <img src="assets/arrows/minimizeArrow.svg"/> <p>Minimera</p> <img src="assets/arrows/minimizeArrow.svg"/> </div> </div> ) } }