{ props.history.map((element,index)=>{
return( <>
<Historyy temp={element.main.temp} imgvalue3={imgvalue3} imageUrl={element.weather[0].icon} mintemperature={element.main.temp_min} maxtemperature={element.main.temp_max} weather={element.weather[0].description} wind={element.wind.speed} humidity={element.main.humidity} time={index + 1}/>
</>
)
}) }
//this is the code i want to do that whenever my map function get a null value or undefined value i can simply show a other message like data not found.
a possible sollution, ternary operator. if history is null or undefined show your the h1 tag else show the history component.
{props.history ? props.history.map((element,index)=>{
return(<>
<Historyy temp={element.main.temp} imgvalue3={imgvalue3} imageUrl={element.weather[0].icon} mintemperature={element.main.temp_min} maxtemperature={element.main.temp_max} weather={element.weather[0].description} wind={element.wind.speed} humidity={element.main.humidity} time={index + 1}/>
</> ) }) : <h1>an error has occured</h1> }
Related
I'm running on react 18.2.0 nextjs1 0.1.0 node v18.12.1.
I've encountered a strange case where on the first render, a prop is undefined, but on the second render it has it. The variable is defined at the beginning of the parent:
default function Home() {
console.log('executing home');
.
.
let LocationsData = [];
console.log('defined LocationsData',LocationsData.length);
.
.
.
return (
<>
<BuildCountrieslist data={LocationsData} />
</>
)}
function BuildCountrieslist(props){
console.log('started BuildCountrieslist , Data.length is', props.data.length);
}
console.log shows:
executing home (as expected)
defined LocationsData 0 (as expected)
started BuildCountrieslist , **Data.length is undefined ( the error in question)**
executing home (as expected)
defined LocationsData 0 (as expected)
BuildCountrieslist , Data.length is 0 (as expected)
function App() {
console.log('executing home');
let LocationsData = [];
console.log('defined LocationsData', LocationsData.length);
return (
<>
<BuildCountrieslist data={LocationsData} />
</>
)
}
function BuildCountrieslist(props) {
console.log('started BuildCountrieslist , Data.length is', props.data.length);
}
export default App
It should be like this
Its my bad, ( hand on face )
Indeed I have some code after which LocationsData is set as undefined.
Sorry
:-(
When I run tis code on localhost did not show any error
const displayProduct = product
.filter(prod =>
prod.category.includes(filters.category) &&
prod.brand.includes(filters.brand) &&
prod.type.includes(filters.type)
)
.filter((product)=>{
if (searchTerm == ""){
return product
}else if(product.productName.replaceAll(/\s/g,'').toLowerCase().includes(searchTerm.toLowerCase().replaceAll(/\s/g,''))){
return product
}
})
.slice(pagesVisited,pagesVisited + productPerPage)
.map(product => {
return(
<div className='imageContainer ' key={product.id}>
<img src={product.productImageOne?require(`../../Images/${product.productImageOne}`):null} className="image"/>
<div className='productName'>
<Link style={{ textDecoration:'none' }} to="/productsDetails" state={{ product:product }}>{product.productName?product.productName:null}</Link>
</div>
</div>
)
})
But when I host my website on a server it show "TypeError: x.filter is not a function"..
How do I solve it?
This occurs because product isn't defined yet.
In your local machine, product may be an array containing your data when React is processing the view because your server may be on you machine, but on your server, you may need to wait longer in order to make your HTTP request.
You can fix your error by replacing all your product. occurence by product?., such as:
const displayProduct = product
?.filter(prod =>
...
)
?.filter((product)=>{
...
})
?.slice(...)
?.map(...)
Plus, you may need to check product or displayProduct's value before, to add a loader or spinning stuff showing data's fetching.
The error I get:
Objects are not valid as a React child, If you meant to render a collection of children, use an array instead.
here res is a json which has nested arrays so i have used _.foreach for extracting it and state is successfully updating but problem lies in displaying it
class ViewExchange extends React.Component{
state={list:[],refresh:false}
componentWillMount(props){
if(_.isEmpty(Cookies.get())){
this.props.history.push("/signup")
}
else{
let platform = Cookies.get('platform')
axios.post('http://localhost:3001/user/viewexchange',{platform})
.then(res=>{
this.setState({list:res.data})
_.forEach(this.state.list,(value)=>{
_.forEach(value.url,(e)=>this.setState({list:[e]}))
})
})
}
}
renderList=()=>{
console.log("in method")
return this.state.list.map((item,key)=>{
return <div key={key}>{item}</div>
})
}
render(){
return (
<div>
{this.renderList()}
</div>
);
}
}
export default withRouter(ViewExchange);
This error mostly comes when you try to show some content in jsx which is not a valid object key ( instead is an object itself ). In your case it will be like:
return this.state.list.map((item,key)=>{ return <div key={key}>{item.index}</dv> }); // instead of item, you have to use item.index which is an existing key of object
Here item.index is the index which you want to show from the object and don't forget to provide the key, in absence of key it will show a warning also performance is compromised.
I have working react-native code as sample below, I plan to refactor for readable reason, basically I need to check if state.room has content then return Text with then content of field
return (
{ state.room ?
<Text>{state.room.name}</Text>
: null }
{ state.room ?
<Text>{state.room.address}</Text>
: null }
);
You can use { state.room && <Text>{state.room.name}</Text> } instead.
You can simply check that state.room is truthy before you are trying to touch it once before the return statement and then assume it is fine.
if (!state.room) {
return null;
}
return (
<React.Fragment>
<Text>{state.room}</Text>
<Text>{state.room.address}</Text>
</React.Fragment>
)
You can just simply check write as
return state.room && (
<>
<Text>{state.room.name}</Text>
<Text>{state.room.address}</Text>
</>
)
If fragment shorthand is not supported, you can write as React.Fragment instead of <>.
It will return only render the markup if state.room is not falsy.
I have a filter on an array in the render function in a React component:
someArray.filter(item => {
if (item.name.includes(searchText))return true
}).map(item=>{
return <h1>{item.name}</h1>
});
How can I elegantly display some text along the lines of "No search results" when no items are being returned by the map function?
There are a few ways you can do this. You can use a ternary operator (and also shorten your callbacks):
const filtered = someArray.filter(item =>
item.name.includes(searchText)
);
//Then, in your JSX:
{
filtered.length > 0 ?
filtered.map((item, key) =>
<h1 key={key}>{item.name}</h1>
)
:
<h1>No search results</h1>
}
This checks if there are any filtered results. If so, it will map them to h1s that have the name of the item. If not, then it will simply render a single h1 with the text 'No search results'.
One possible way is, instead of putting this code directly inside JSX render method, put it inside a method and call that method from render.
Like this:
_filterItem(){
const arr = someArray.filter(item => item.name.includes(searchText))
if(!arr.length) return <div>No data found</div>;
return arr.map(item => <h1 key={/*some unique value*/}>{item.name}</h1>)
}
render(){
return(
<div>{this._filterItem()}</div>
)
}
Suggestion:
With filter and map you can use concise body of arrow function instead of block body, for more details check MDN Doc.
Short and concise:
someArray.map(({name}) => name.includes(searchText) && <h1>{name}</h1>)