How to pass this warning?
Code
const Main = (header, navigation) => {
return (
<>
<div>
{navigation !== false && <Navigation />}
</div>
</>
)
}
i tried this but still have the same warning
<Main navigation>
....
</Main>
Console output true
<Main navigation={true}>
....
</Main>
Console output true
<Main navigation={+true}>
....
</Main>
Console output 1
<Main>
....
</Main>
Console output undefined
use this code:
const Main = (header, navigation) => {
if (navigation !== false) return <Navigation />
return <></>
}
Try this:
const Main = (header, navigation) => {
return (
!!navigation ? <Navigation />:<></>
)
}
Related
After receiving data from the DB server, you try to render it, but the console log shows the data, but the component is not rendered. What's the reason?
useEffect(() => {
readRequest().then(setTodos);
console.log()
}, []);
return (
<div className="App">
{todos.map((todo) => {
console.log(todo);
console.log(todo.text);
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
})}
<p>dfdf</p>
</div>
);
The picture is a screen capture.
Your .map callback does not return anything.
Change the { to (:
return (
<div className="App">
{todos.map((todo) => ( // <-- here
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
))}
<p>dfdf</p>
</div>
);
Or use the return keyword.
return (
<div className="App">
{todos.map((todo) => {
return (<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>);
})}
<p>dfdf</p>
</div>
);
I'm fetching data and showing under a search input
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try{
const response = await axios("/posts");
setAPIData(response.data);
setIsLoading(false);
} catch(error) {
setError(true);
console.error(error);
}
};
fetchData();
}, []);
console.log(APIData)
The user types in the search input and it show the results and if there is no results it shows a message "No Results Found!" .. the problem is this message is showing by default which is a bad UI, I only want this message to show if there is no result and by default shows the APIData
{filteredResults && filteredResults.length > 0 ? (
filteredResults.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="results-title">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
) : (
<h1>No results found!</h1>
)}
I didn't if I should another useState for it or there another way !
You can use isLoading state for conditional rendering:
{isLoading ? (
<h1>Loading...</h1>
) : (
<>
{filteredResults && filteredResults.length > 0 ? (
filteredResults.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="results-title">{post.title}</h2>
<ol className="card-username">{post.username}</ol>
</Link>
</div>
</div>
);
})
) : (
<h1>No results found!</h1>
)}
</>
)}
Remember to set isLoaidng state to false if the request fails:
try {
// ...
} catch(error) {
// ...
} finally {
setIsLoading(false); // <==
}
my state variable contains an array of objects(where is each object contains username,user_DP,imageUrl, caption) which is to be rendered but while using map() to render gives an error that I am unable to resolve.
example of state variable :
this.state = {
route: 'signin',
postDetails: [...]
};
and my render() looks like
render(){
const {route, postDetails} = this.state;
return (
<div className="App">
{
route === 'home' ?
<Navbar/>
{
postDetails.map((post,index)=>{
return(<Post
key = {index}
username = {post.username}
user_DP = {post.user_DP}
imageUrl = {post.imageUrl}
caption = {post.caption}
/>);
})
}
:
(
route === 'signin'?
<Signin onRouteChange = {this.onRouteChange}/>
:
<Signup onRouteChange = {this.onRouteChange}/>
)
}
</div>
);
}
I am getting an error like this
Syntax error: Unexpected token, expected ":" (44:13)
42 | route === 'home' ?
43 | <Navbar/>
> 44 | {
| ^
45 | postDetails.map((post,index)=>{
46 | return(<Post
47 | key = {index}
please help in removing this error it will greatly help me.
Your <Navbar /> and map() with <Post>s must be within a single node. You might use React.Fragment or wrap them in a <div> if that doesn't break your design:
The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element.
function render() {
const { route, postDetails } = this.state;
return (
<div className="App">
{route === "home" ? (
<> {/* <- shorthand for <React.Fragment> */}
<Navbar />
{postDetails.map((post, index) => {
return (
<Post
key={index}
username={post.username}
user_DP={post.user_DP}
imageUrl={post.imageUrl}
caption={post.caption}
/>
);
})}
</> {/* <- shorthand for </React.Fragment> */}
) : route === "signin" ? (
<Signin onRouteChange={this.onRouteChange} />
) : (
<Signup onRouteChange={this.onRouteChange} />
)}
</div>
);
}
As you can see in my code example below which is part of a render() block in a react component, I am trying to render the value of the variable "folder" in the outer loop. Unfortunately, the code section
<div>{folder}</div>
seems to be ignored. Can anyone help me in finding the right syntax that outputs the current folder value from the outer loop?
{
folders.map((folder,_index1) => {
<div>{folder}</div>
return (
items.map((item, index) => {
return (
<div>
{(folder === item.folder) ?
<Draggable
key={item.id}
draggableId={item.id}
index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{ ...provided.draggableProps }
{ ...provided.dragHandleProps }
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}>
<div>
{item.content}
</div>
</div>
)}
</Draggable>
: null
}
</div>
)})
)})
}
Following Zydnar's comment above:
This is what it should look like:
{
folders.map((folder,_index1) => {
return (
<> // or <React.Fragment> with the corresponding closing tag
<div>{folder}</div> // this has to be part of what is returned
items.map((item, index) => {
return (
<div>
{(folder === item.folder) ?
...
</>
)})
)})
}
I am looking for a solution that will remove a <header/> and <footer/> component from my signup.js and signin.js pages.
Currently, my root index.js file is shown as
class Template extends React.Component {
render() {
const { children } = this.props
return (
<main>
<Header/>
{children()}
<Footer/>
</main>
)
}}
Template.propTypes = {
children: PropTypes.func
}
export default Template
Which is the main layout for all my page, posts, products, etc. Yet without creating another layout, I would like to conditionally remove the <header/> and <footer/> components from being a part of pages signup.js and signin.js
As suggested by GatsbyJS I have tried - of which is removing the components from all pages.
if (this.props.location.pathname !== "/signup/") {
return (
<main>
{children()}
</main>
)
} else {
return this (
<main>
<Header/>
{children()}
<Footer/>
</main>
)
}
I would use a different template for your signin and signup components, but if you don't do that:
You have a typo in your code, in your else you are returning this(...) it should return (...). This way:
if (this.props.location.pathname !== "/signup/") {
return (
<main>
{children()}
</main>
)
} else {
return (
<main>
<Header/>
{children()}
<Footer/>
</main>
)
}
Also, perhaps your if condition is inverted... because in /signup/ you don't want Header and Footer:
if (this.props.location.pathname === "/signup/" || this.props.location.pathname === "/signin/") {
return (
<main>
{children()}
</main>
)
} else {
return (
<main>
<Header/>
{children()}
<Footer/>
</main>
)
}
Alternatively, if you don't want to duplicate code...
const isSignIn = ["/signup/", "/signin/"].indexOf( this.props.location.pathname) !== 0;
return (
<main>
{ !isSignIn && (<Header/>) }
{children()}
{ !isSignIn && (<Footer/>) }
</main>
)