I am facing a very silly error , but it tooks me hours and I cannot get it right.
I am trying search the Recipe through the database which has 2 collections right now.
Now in my console I am getting the write results after searching . The main problem is that out of 2 collections(Chicken and Pizza recipe) the object.name of Chicken is not getting assigned to setsname.
if (object.Name == key || c==true) {
console.log("show only"+object.Name);
setsname(option.Name)
console.log(sname);
}
In the above code the first console.log("show only"+object.Name); is working fine and displaying correct object.Name for both 'Chicken and Pizza'
.The second statement setsname(option.Name) works only for when I am searching for Pizza. I don't why setsname(option.Name) is not working for Chicken. Both the database collections have similar type of values.
But the sname for Chicken is comes undefined whenever I console.log it.
Below is my code
import React, { useEffect } from 'react'
import {
BrowserRouter as Router, Routes, Route, useLocation, Link, useNavigate
} from 'react-router-dom'
import Navbar from './Navbar'
import RecipeCard from './RecipeCard'
import Details from './Details'
import { AnimatePresence, motion } from "framer-motion"
import Add from './Add'
import clicked from './RecipeCard'
import { useState } from 'react'
import Login from './Login'
import Register from './Register'
import Protected from './Protected'
import Logout from './Logout'
import Myrecipe from './Myrecipe'
import { useContext } from 'react'
import { Context } from '../Context'
import { query } from 'firebase/firestore'
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import { useRef } from 'react'
export default function Animate(props) {
const navigate = useNavigate()
const effran= useRef(false)
const [key, setkey] = useState()
const [sname, setsname] = useState('')
const user = useContext(Context)
const [pname, setpname] = useState(localStorage.getItem('items'))
function assign(nigga) {
setpname(nigga);
localStorage.setItem('items', JSON.stringify(nigga));
// console.log(nigga);
}
//To save state
useEffect(() => {
const items = (localStorage.getItem('items'));
//console.log(items);
if (items) {
setpname(items);
}
}, []);
function search() {
if (props.query !== undefined && effran.current==false) {
props.query.map((object, i) => {
function check() {
var ret
object.Ingredients.map((pee) => {
if (pee.includes(key)) {
console.log(pee+" "+key);
ret = true;
}
})
return ret
}
var c=check()
if (object.Name == key || c==true) {
console.log("show only"+object.Name);
setsname(option.Name)
console.log(sname);
}
else {
setsname('')
}
console.log(sname);
})
// console.log(key);
}
}
const location = useLocation()
return (
<motion.div className='all'
>
<AnimatePresence>
<Routes location={location} key={location.pathname}>
<Route path='/' element={<Login />} />
<Route path='/Register' element={<Register />} />
<Route path='/Welcome' element={[<Protected><Navbar /></Protected>, <Protected><div className='child'><Form.Control value={key} onChange={(e) => { setkey(e.target.value) }}
type="search"
placeholder="Search a Recipe"
className="me-2"
aria-label="Search"
/><Button onClick={search} variant="outline-success">Search</Button></div></Protected>, <h2>Recipes</h2>,
<div className='recipes'>
{props.query ? props.query.map((object, i) => {
if (sname == object.Name && sname) {
console.log('in');
console.log(object.Name);
return (<Link className='lin' to='/Details'>
<div onClick={() => assign(object.Name)}>
<Protected><RecipeCard
src={object.src}
name={object.Name}
ingredients={object.Ingredients}
steps={object.Steps}
key={i}
/></Protected>
</div></Link>)
}
else if(key==''){
console.log('nen');
console.log(object.Name);
return (<Link className='lin' to='/Details'>
<div onClick={() => assign(object.Name)}>
<Protected><RecipeCard
src={object.src}
name={object.Name}
ingredients={object.Ingredients}
steps={object.Steps}
key={i}
/></Protected>
</div></Link>)
}
}) : "Loading"}
<Link className='lin' to='/Add'>
<div className='cardcont'>
<img src='https://cdn.pixabay.com/photo/2017/11/10/05/24/add-2935429_960_720.png' alt="1" className='cardimg' />
<div className='cardbody'>
<h3>Add</h3>
</div>
</div></Link>
</div>
]} />
<Route path='/MyRecipe' element={[<Protected><Navbar /></Protected>, <h2>My Recipes</h2>,
<Protected>
<div className='recipes'>
{props.query2 ? props.query2.map((object, i) => {
if (user && user.email === object.email) {
// console.log(user.email);
return (<Link className='lin' to='/Details'>
<div onClick={() => assign(object.Name)}>
<Protected><RecipeCard
src={object.src}
name={object.Name}
ingredients={object.Ingredients}
steps={object.Steps}
key={i}
/></Protected>
</div></Link>)
}
}
) : "Loading"}
<Link className='lin' to='/Add'>
<div className='cardcont'>
<img src='https://cdn.pixabay.com/photo/2017/11/10/05/24/add-2935429_960_720.png' alt="1" className='cardimg' />
<div className='cardbody'>
<h3>Add</h3>
</div>
</div></Link>
</div>
</Protected>
]} />
<Route path='/Details' element={
[<Navbar />, props.query ? props.query.map((object, m) => {
if (pname == object.Name) {
// console.log(object.Name);
return (<Details
src={object.src}
name={object.Name}
Ingredients={object.Ingredients}
Steps={object.Steps}
key={m}
/>)
}
}) : console.log(query)]} />
<Route path='/Add' element={[<Navbar />, <Add />]} />
</Routes>
</AnimatePresence>
</motion.div>
)
}
If someone needs to look at database:
Chicken - https://postimg.cc/64sXZ9TL
Pizza - https://postimg.cc/gallery/Jm7vdCf
If any other code needed, I will provide. Where is my mistake?
