I am learning React and have run into the following situation:
I have a string variable that I am passing as a prop to different ponents to be rendered by JSX.
When the ponent and its sub-ponents are rendered, the string does not render html special characters, instead rendering the character code as text.
How can I get the variable to render as html?
Here is the code for a ponent that works pletely, except that the tempUnitString variable renders as ° K, while the <th> below renders its units as ° K.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../ponents/chart';
import GoogleMap from '../ponents/google_map'
class WeatherList extends Component {
renderWeather(cityData, tempUnits){
const name = cityData.city.name;
const id = cityData.city.id;
const humidity = cityData.list.map(weather => weather.main.humidity);
const pressure = cityData.list.map(weather => weather.main.pressure);
const { lon, lat } = cityData.city.coord;
let temp = cityData.list.map(weather => weather.main.temp);
if (tempUnits === "K"){
temp = cityData.list.map(weather => weather.main.temp);
} else if (tempUnits === "F"){
temp = cityData.list.map(weather => weather.main.temp * 9/5 - 459.67);
} else {
temp = cityData.list.map(weather => weather.main.temp - 273.15);
}
let tempUnitString = "° " + tempUnits;
return (
<tr key={ id }>
<td><GoogleMap lat={ lat } lon={ lon } /></td>
<td>
<Chart color="red" data={ temp } units={ tempUnitString } />
</td>
<td>
<Chart color="green" data={ pressure } units=" hPa" />
</td>
<td>
<Chart color="orange" data={ humidity } units="%" />
</td>
</tr>);
}
render() {
const tempUnits = this.props.preferences.length > 0 ? this.props.preferences[0].tempUnits : "K";
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature (° { tempUnits })</th>
<th>Pressure (hPa)</th>
<th>Humidity (%)</th>
</tr>
</thead>
<tbody>
{ this.props.weather.map( item => this.renderWeather(item,tempUnits) ) }
</tbody>
</table>
);
}
}
function mapStateToProps({ weather, preferences }){// { weather } is shorthand for passing state and { weather:state.weather } below
return { weather, preferences }; // === { weather:weather }
}
export default connect(mapStateToProps)(WeatherList);
UPDATE
Using the documentation passed to me by @James Ganong I set up a boolean prop on the subponent isTemp and based on that created a JSX variable.
The subponent (minus includes and func definitions) looks like this:
export default (props) => {
let tempDeg = '';
if (props.isTemp){
tempDeg = <span>°</span>;
}
return (
<div>
<Sparklines height={ 120 } width={ 100 } data={ props.data }>
<SparklinesLine color={ props.color } />
<SparklinesReferenceLine type="avg" />
</Sparklines>
<div>{ average(props.data)} { tempDeg }{ props.units }</div>
</div>
);
}
The call to it looks like this:
<Chart color="red" data={ temp } units={ tempUnits } isTemp={ true } />
I am learning React and have run into the following situation:
I have a string variable that I am passing as a prop to different ponents to be rendered by JSX.
When the ponent and its sub-ponents are rendered, the string does not render html special characters, instead rendering the character code as text.
How can I get the variable to render as html?
Here is the code for a ponent that works pletely, except that the tempUnitString variable renders as ° K, while the <th> below renders its units as ° K.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../ponents/chart';
import GoogleMap from '../ponents/google_map'
class WeatherList extends Component {
renderWeather(cityData, tempUnits){
const name = cityData.city.name;
const id = cityData.city.id;
const humidity = cityData.list.map(weather => weather.main.humidity);
const pressure = cityData.list.map(weather => weather.main.pressure);
const { lon, lat } = cityData.city.coord;
let temp = cityData.list.map(weather => weather.main.temp);
if (tempUnits === "K"){
temp = cityData.list.map(weather => weather.main.temp);
} else if (tempUnits === "F"){
temp = cityData.list.map(weather => weather.main.temp * 9/5 - 459.67);
} else {
temp = cityData.list.map(weather => weather.main.temp - 273.15);
}
let tempUnitString = "° " + tempUnits;
return (
<tr key={ id }>
<td><GoogleMap lat={ lat } lon={ lon } /></td>
<td>
<Chart color="red" data={ temp } units={ tempUnitString } />
</td>
<td>
<Chart color="green" data={ pressure } units=" hPa" />
</td>
<td>
<Chart color="orange" data={ humidity } units="%" />
</td>
</tr>);
}
render() {
const tempUnits = this.props.preferences.length > 0 ? this.props.preferences[0].tempUnits : "K";
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature (° { tempUnits })</th>
<th>Pressure (hPa)</th>
<th>Humidity (%)</th>
</tr>
</thead>
<tbody>
{ this.props.weather.map( item => this.renderWeather(item,tempUnits) ) }
</tbody>
</table>
);
}
}
function mapStateToProps({ weather, preferences }){// { weather } is shorthand for passing state and { weather:state.weather } below
return { weather, preferences }; // === { weather:weather }
}
export default connect(mapStateToProps)(WeatherList);
UPDATE
Using the documentation passed to me by @James Ganong I set up a boolean prop on the subponent isTemp and based on that created a JSX variable.
The subponent (minus includes and func definitions) looks like this:
export default (props) => {
let tempDeg = '';
if (props.isTemp){
tempDeg = <span>°</span>;
}
return (
<div>
<Sparklines height={ 120 } width={ 100 } data={ props.data }>
<SparklinesLine color={ props.color } />
<SparklinesReferenceLine type="avg" />
</Sparklines>
<div>{ average(props.data)} { tempDeg }{ props.units }</div>
</div>
);
}
The call to it looks like this:
<Chart color="red" data={ temp } units={ tempUnits } isTemp={ true } />
2 Answers
Reset to default 4React actually has a page that addresses this and some other potential solutions (using unicode characters, saving the file as utf8, using dangerouslySetInnerHtml): jsx-gotchas
Another option is to create a simple, reusable Temp ponent that has types you pass it:
const TEMP_C = 'C';
const TEMP_K = 'K';
const Temp = ({ children, unit }) => <span>{children}°{unit}</span>;
const App = () => (
<div>
<p>Temperature 1: <Temp unit={TEMP_K}>25</Temp></p>
<p>Temperature 2: <Temp unit={TEMP_C}>25</Temp></p>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'))<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>Without string concatenation html symbols works as usual. For some reason, when you concatenate a symbol with a string, then the symbol isn't decoded and it's rended as characters.
You can workaround it as in the example below or use a plugin (html-entities for instance).
const App = () => <Child deg="°" temp={25} />;
const Child = ({deg, temp}) => <div>{temp} {deg}</div>;
ReactDOM.render(<App />, document.getElementById('root'))<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>