score:1
As a blind suggestion as I do in my comment, you can conditionally render your component.
const product = {
id: "794",
name: "Pellentesque habitant morbi",
description:
"<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
short_description:
"<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
sku: "1000",
price: "200",
categories: [
{
name: "Best Seller"
}
],
regular_price: "21.99",
tags: [
{
name: "Books Online"
},
{
name: "Ebooks"
}
],
images: [
{
src: "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg"
},
{
src: "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg"
}
],
author: "Mo. Ra. Walambe"
};
function fakeApi() {
return new Promise(resolve => setTimeout(() => resolve(product), 2000));
}
class App extends React.Component {
state = {
product: null,
};
componentDidMount() {
fakeApi().then(product => this.setState({ product }));
}
render() {
return (
<div>
<Product product={this.state.product} />
</div>
);
}
}
function Product(props) {
const { product } = props;
if (!product) return <div>Getting the product...</div>;
const tags = product.tags.map(tag => {
return <li>{tag.name}</li>;
});
return (
<div>
<h1 className="product_title">{product.name}</h1>
<span className="posted_in">
Categories: <ul>{tags}</ul>
</span>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
Do not think about the fakeApi
part, I'm just simulating the fetch part there. I'm not sure how do you initialize the product
state in the parent component but as you can see I'm doing it as null
. So I can check its existence in the child component. If no product
yet I'm rendering a piece of temporary information. After fetching the product child component is rerendered and return the product information.
As you can see in the comments there can be other scenarios. For example, you can set the initial state to {}
and check for its properties' existence, like tags
or set them to empty values like []
for the first render.
Using conditional rendering is common usage. React can deal with undefined
values, there isn't any problem with that. This is why prodSum.name
is not a problem, since it is undefined
. But Javascript can't deal something like undefined.someValue
. Because you are trying to get someValue
from undefined
and this is not possible. prodSum.tags[0].name
is undefined.name
here.
Source: stackoverflow.com
Related Query
- In react component how I can map the json property which is array of object?
- How react functional component can use object variable which declared behind the usage? (include example)
- How to map array of objects which i need to groupby date property in JSON format with react JS
- How to map over an object which has a unique id for each object values and return the values to a React component
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- How can I render the contents of an array nested inside an object in React Admin's show/ArrayField component?
- How can I access JSON property of nested object inside object array
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
- How can loop through array of JSON Object to find property value that includes user input characters
- In React How can I fetch data and render a single object in a states array without mapping the whole thing?
- How to find the count of some object property in array of objects using react and javascript?
- How can I change the value of an object in an array in react redux when the action is called?
- How can I filter json data from api call in react into different sections of the component
- How can I get all the object inside an object which is present inside an array and add the result into another array
- How can i access the multibrands.legKey property of this json object
- How can I load the array images from JSON file in react gatsby?
- So how can I sum all the values in all objects in an array which is coming from react redux?
- How can I set up state in a React app using arrays in a json object as well as arrays not in the json object?
- how can i add object in array which is in object as property (react.js )
- how to return element on the basis of an property of object which is inside the array
- React/Material-UI: How can I map multiple tables from a JSON object with more than one array of data?
- how can I set the reducer's return value to state object in component in react js
- How to map data of a field in an JSON object which is an array of objects
- React Hooks: How can I use a hook to map an array from a dumb component
- How can I prevent to add data if the object property value is different using react js
- How to map the required data of array of object which i got from api call to usestate variable
- how can i loop through the array inside of an object. and render it in the react component
- How to map through a json object that is stored in a react component not coming from an api?
- React/MaterialUI - How can I map each JSON array in my object to it's own separate table?
- How can custom Hooks in React have different state names then the state name used by the functional component from which it was called?
More Query from same tag
- Where to do data.map() in ReactJs component?
- Using fetchMore to fetch ALL data on component mount
- Toggle all checkbox using a main button and itself
- React-Router Link, how to trigger a click event on a Link from another component
- Parsing error: Unexpected keyword 'export'
- HTML5 audio is not playing in my React app in localhost
- how to get onUploadProgress in axios?
- Is it possible to place simple app with React and MobX within one html page?
- React child component not updating parents state, so second child is not noticing the changes
- How to correctly use Context API and Provider
- What's the right way to get data from ReactJS front-end to NodeJS back-end?
- I'm trying to display search results for both name and genres for particular TV shows in React, how to use one filter method for both name and genre?
- React re render array whereas item key has not changed
- How routing to home can be done in React
- storing values in an array using react usestate hook
- ReactJS redirect
- Conditional Rendering in Styled Component based on Parents' Props
- react-table row selection with custom field instead of index
- find div inside a plugin with className and add another class to it in react
- Add new key value to Redux Toolkit state
- useDebugValue not Displayed
- gulp build with browser sync and react not reloading page
- dynamic routes in nextjs crawlable to search engines?
- How to add only new nodes to d3 force directed graph?
- How to center a form using material-ui only?
- React - get data with axios
- ReactJS remove bound event handlers in ES6
- Redux & React: My reducer don't recognize action with setInterval
- In React why does a child component's render function get called twice?
- redux-immutable and initialstate