In the following component, if I try to access the properties of myData object inside the getMessage() function, using myData.gender I'm getting an undefined error.
If I try myData.myData.gender it works. Why is that?
When I inspect myData coming into the getMessage() function, I see that it's an object and it contains a myData object in it. I'm confused why myData object is placed inside of another object.
Interestingly, inside my component I can access the properties directly as you can see in the line <div>Hello {myData.firstName}</div>
Here's my simple React component:
import React, {Component} from 'react';
const MyComponent = ({myData}) => {
return(
<div>Hello {myData.firstName}</div>
<div>
{getMessage(myData)}
</div>
);
};
const getMessage(myData) => {
let output = "";
if(myData.Gender == "m") {
output = "<span>Enjoy the football game tonight!</span>";
}
else {
output = "<span>Enjoy your roses!</span>";
}
return output;
}
ChannelContent.propTypes = {
myData: PropTypes.object.isRequired
};
export default MyComponent;
you've a typo either in your question or in code:
try myData.gender === 'm' instead of myData.Gender == "m"
Related
I have a component I call that is a passed a recordID and returns the text associated to the Id. 33 should = Tower
will render "Tower" on the screen. All good, but...
When I try to use the component in the following IF statement it does not work.
...
if (<GetAssetTypeNameComponent datafromparent = {assettype_assettypeId}/> === "Tower")
{
this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
}
Using the passed parameter does work if I change the code to:
...
if (assettype_assettypeId === "33")
{
this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
}
...
What am I doing wrong?
Rob
Component Code that needs to be a Function....
...
class GetAssetTypeNameComponent extends Component {
constructor (props){
super(props)
this.state = {
assettype:[]
}
}
componentDidMount()
{
AssetTypeService.getAssetTypeById(this.props.datafromparent).then( (res) =>{
let assettype = res.data;
this.setState({isLoading:false});
this.setState({
assettypeName: assettype.assettypeName,
assettypeType: assettype.assettypeType
});
});
}
render() {
return (
<div>
{this.state.assettypeName}
</div>
);
}
}
export default GetAssetTypeNameComponent;
...
Following Function code compiles:
...
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const GetAssetTypeNameFunction = (props) =>{
// destructuring
const { assettype_assettypeId } = props;
const [assetType,setAssetType] = useState()
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data));
const arrayMap = assetType.map((post)=>{
return(
<ul>
{post.assettypeName}
</ul>
);})
return (
{arrayMap}
);
}
export default GetAssetTypeNameFunction;
...
Get execution error:
I think because I calling the function from within an eventHandler:
...
editAssets(assetsid,assettype_assettypeId){ if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower") { this.props.history.push(/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}); }]
...
----- Error: Invalid hook call. Hooks can only be called inside of the body of a function component. I am responding to a onClick in a list to route to a specific component based on the function $
How do I get around this?
A component renders content to be displayed in the page. The retuned value of rendering a component is a tree of nodes that contain your content. All this means that <GetAssetTypeNameComponent> may contain the text content Tower, but it is not equal to the string "Tower". It just doesn't make any sense to render a component as the test for a conditional like this.
In React you want to use logic to tell react how to render. You do not want to render and then use the result in your logic.
It's hard to give advice on the best way to fix that with so little code, but maybe you want a a simple function to coverts the id into some text for you.
function getAssetName(id) {
return someLogicSomewhere(id).result.orWhatever
}
And now you can do something like:
if (getAssetName(assettype_assettypeId) === 'Tower')
{
this.props.history.push(
`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`
);
}
I'm stuck on a error for the reserved keyword "this". In my React Component below shows me passing in a state from a my main component "App.js" to my "RecipeList.js" component to then map the data and render each RecipeItem Component. I just don't understand why I get this error
React.js - Syntax error: this is a reserved word
The error is called in RecipeList inside the render return method; If anybody could help that would great!
Thanks
App.js
//main imports
import React, { Component } from 'react';
//helper imports
import {Button} from 'reactstrap'
import RecipeItem from './components/RecipeItem';
import RecipeList from './components/RecipeList';
import './App.css';
const recipes = [
{
recipeName: 'Hamburger',
ingrediants: 'ground meat, seasoning'
},
{
recipeName: 'Crab Legs',
ingrediants: 'crab, Ole Bay seasoning,'
}
];
class App extends Component {
constructor(props){
super(props);
this.state = {
recipes
};
}
render() {
return (
<div className="App">
<div className = "container-fluid">
<h2>Recipe Box</h2>
<div>
<RecipeList recipes = {this.state.recipes}/>
</div>
</div>
<div className = "AddRecipe">
<Button>Add Recipe</Button>
</div>
</div>
);
}
}
export default App;
RecipeLists.js
import React, {Component} from 'react';
import _ from 'lodash';
import RecipeItem from './RecipeItem';
class RecipeList extends Component {
renderRecipeItems() {
return _.map(this.props.recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
}
render() {
return (
{ this.renderRecipeItems() }
);
}
}
export default RecipeList
All the solutions given here are correct.
The easiest change is to just wrap your function call in a JSX element:
return (
<div>
{ this.renderRecipeItems() }
</div>
)
However, none of the answers are (correctly) telling you why the code was breaking in the first place.
For the sake of an easier example, let's simplify your code a bit
// let's simplify this
return (
{ this.renderRecipeItems() }
)
such that the meaning and behavior are still the same. (remove parenths and move curlies):
// into this
return {
this.renderRecipeItems()
};
What this code does is it contains a block, denoted by {}, within which you're trying to invoke a function.
Because of the return statement, the block {} is treated like an object literal
An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).
which expects either a: b or a (shorthand) syntax for it's property-value pairs.
// valid object
return {
prop: 5
}
// also valid object
const prop = 5;
return {
prop
}
However, you're passing a function call instead, which is invalid.
return {
this.renderRecipeItems() // There's no property:value pair here
}
When going through this code, the engine assumes it will read an object-literal. When it reaches the this., it notices that . is not a valid character for a property name (unless you were wrapping it in a string - see bellow) and the execution breaks here.
function test() {
return {
this.whatever()
// ^ this is invalid object-literal syntax
}
}
test();
For demonstration, if you wrapped your function call in quotes, code would accept the . as part of a property name and would break now because a property value is not provided:
function test() {
return {
'this.whatever()' // <-- missing the value so the `}` bellow is an unexpected token
}
}
test();
If you remove the return statement, the code wouldn't break because that would then just be a function call within a block:
function test() {
/* return */ {
console.log('this is valid')
}
}
test();
Now, an additional issue is that it's not the JS engine that is compiling your code but it's babel, which is why you get the this is a reserved word error instead of Uncaught SyntaxError: Unexpected token ..
The reason is that JSX doesn't accept reserved words from the JavaScript language such as class and this. If you remove this, you can see that the reasoning above still applies - babel tries to parse the code as an object literal that has a property, but no value, meaning babel sees this:
return {
'renderRecipeItems()' // <-- notice the quotes. Babel throws the unexpected token error
}
Wrap the this.renderRecipeItems() part with a div, it will work.
Reason why it was failing, is explained extremely well by #nem035 in this answer.
Like this:
render () {
return (
<div>
{ this.renderRecipeItems() }
</div>
);
}
And i think instead of:
<RecipeItem key = {i} {...recipes} />
It should be:
<RecipeItem key = {i} {...recipeItem} />
These are the changes i can see, may be some others will be required also.
You can avoid this by rewriting RecipeLists.js as a pure stateless component.
As Pure component:
import _ from 'lodash';
import RecipeItem from './RecipeItem';
const RecipeList = props => renderRecipeItems(props);
const renderRecipeItems = ({ recipes }) => _.map(recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
export default RecipeList;
So now you're component is basically just a function with params.
I have a little piece of code that renders data from the database according to the path name. My only problem is that when I try to retrieve that data, using this.state.note._id it returns an error that says it cannot find _id of undefined. How would I access my object that is put into a state? It only gives the error when I try to access the items inside the object such as _id
import React from "react";
import { Tracker } from "meteor/tracker";
import { Notes } from "../methods/methods";
export default class fullSize extends React.Component{
constructor(props){
super(props);
this.state = {
note: [],
document: (<div></div>)
};
}
componentWillMount() {
this.tracker = Tracker.autorun(() => {
Meteor.subscribe('notes');
let note = Notes.find({_id: this.props.match.params.noteId}).fetch()
this.setState({ note: note[0] });
});
}
renderDocument(){
console.log(this.state.note);
return <p>Hi</p>
}
componentWillUnmount() {
this.tracker.stop();
}
render(){
return <div>{this.renderDocument()}</div>
}
}
I know that the reason it is returning undefined is because (correct me if I am wrong) the page is rendering the function before the the tracker could refresh the data. How would I get like some sort of callback when the tracker receives some data it will call the renderDocument function?
You're initializing your note state as an array but then you're setting it to a scalar later. You're also not checking to see if the subscription is ready which means that you end up trying to get the state when it is still empty. The tracker will run anytime a reactive data source inside it changes. This means you don't need a callback, you just add any code you want to run inside the tracker itself.
You also don't need a state variable for the document contents itself, your render function can just return a <div /> until the subscription becomes ready.
Note also that .findOne() is equivalent to .find().fetch()[0] - it returns a single document.
When you're searching on _id you can shorthand your query to .findOne(id) instead of .findOne({_id: id})
import React from "react";
import { Tracker } from "meteor/tracker";
import { Notes } from "../methods/methods";
export default class fullSize extends React.Component{
constructor(props){
super(props);
this.state = {
note: null
};
}
componentWillMount() {
const sub = Meteor.subscribe('notes');
this.tracker = Tracker.autorun(() => {
if (sub.ready) this.setState({ note: Notes.findOne(this.props.match.params.noteId) });
});
}
renderDocument(){
return this.state.note ? <p>Hi</p> : <div />;
}
componentWillUnmount() {
this.tracker.stop();
}
render(){
return <div>{this.renderDocument()}</div>
}
}
I am using React in my application. I am using connect to access the store, Briefly I have this code:
class MyComponent extends Component{
constructor(props){
super(props)
}
render(){
let components = this.props.components;
if(components.indexOf("SomeString")){
//some stuffs
}
return (
<SomeElement/>
)
}
}
const mapStateToProps = state => {
return {
components: state.someReducer.components
}
}
export default connect(mapStateToProps)(MyComponent)
Components is an array of strings, if I print with console.log(this.props.components) inside the render function, the I am able to see the array in the browser console. However, if I try to find a value inside that array using indexOf then I get this error:
TypeError: components is undefined
So, What am I missing? I tried many things without result
At first cycle, this.props.components is undefined. You can bypass it using
render(){
if(this.props.components) {
let components = this.props.components;
if(components!=null || components!=undefined){ //this will check if components is null or undefined
if(components.indexOf("SomeString")){
//some stuffs
}}
return (
<SomeElement/>
)
}
You need to check for the this.props.components like so:
render(){
if(this.props.components) {
let components = this.props.components;
if(components.indexOf("SomeString")){
//some stuffs
}
return (
<SomeElement/>
)
} else {
return(<div>Loading...</div>)
}
}
I am using the react-redux-mapbox-gl library. I have an array of spots that I want to map in order to create multiple overlay components within the Mapbox Component. However on trying to map the array I always get an undefined error. I am new to React/Redux so am not sure what the issue is.
My Component Below:
import React from 'react';
import Mapbox from 'react-redux-mapbox-gl';
import SpotsOverlay from './SpotsOverlay'
const mapStateToProps = state => ({
spots: state.homemap.spots
})
class HomeMap extends React.Component {
render(){
return (
<Mapbox
mapboxgl={mapboxgl}
accessToken={mapAccessToken}
getMap={this.getMap}
style={this.mapStyle}
options={this.mapOptions}
>
{
this.props.spots.map(spot =>{
return (
<SpotsOverlay
overlay={this.overlay}
key={spot.id}/>
);
})
}
</Mapbox>
);
}
}
Do the mapping outside of the return method might help.
class HomeMap extends React.Component {
render(){
let spots = [];
if(this.props.spots) {
spots = this.props.spots.map(spot =>{
return (
<SpotsOverlay
overlay={this.overlay}
key={spot.id}/>
);
});
}
return (
<Mapbox
mapboxgl={mapboxgl}
accessToken={mapAccessToken}
getMap={this.getMap}
style={this.mapStyle}
options={this.mapOptions}
>
{spots}
</Mapbox>
);
}
}
As #MayankShukla said in his comment, the reason why this works better is that
initially reducer state is {}, so state.homemap.spots will be undefined and when you were using map of undefined