Scribd
Upload
12 views3 pages

React 21

Uploaded by

Amusement Stuff
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views3 pages

React 21

Uploaded by

Amusement Stuff
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

We can sort an array in ascending, descending order, just like this:

let numbers = [10, 5, 8, 20, 3];


numbers.sort((a, b) => a - b);
console.log(numbers); // Output: [3, 5, 8, 10, 20]

and for Boolean values we can convert them into Numbers fir Sorting:
import TodoItem from "./TodoItem";
import styles from "./todolist.module.css";
export default function TodoList({ todos, setTodos }) {
const sortedTodos = todos
.slice() // sort method actually changes the existing array, to prevent we have created a copy using slice method
.sort((a, b) => Number(a.status) - Number(b.status));
// we have converted Boolean values to Number for sorting
return (
<div className={styles.todolist}>
{sortedTodos.map((item) => (
<TodoItem
key={item.name}
item={item}
todos={todos}
setTodos={setTodos}
/>
))}
</div>
);
}

In React we cannot directly use Fetch () function, we have to make an api call depending upon state. When
that input field (state) changes at that time we have to make an api call.
For that we have to use useEffect hook: Syntax:
useEffect(() => {}, []);
i.e. useEffect(callbackfunction,dependency array]

App.jsx

import { useState } from "react";


import Search from "./components/Search";

function App() {
const [foodData, setFoodData] = useState([]);
return (
<div className="App">
<Search foodData={foodData} setFoodData={setFoodData} />

{foodData.map((i) => (
<h1>{i.title}</h1>
))}

</div>
);
}

export default App;


Search.jsx

import { useEffect, useState } from "react";

const URL = "https://api.spoonacular.com/recipes/complexSearch";


const apiAuth = "f959a0eb6df6484398b8741b4c4ab559";

export default function Search({ foodData, setFoodData }) {


const [query, setQuery] = useState("pasta");
useEffect(() => {
async function fetchFood() {
let response = await fetch(`${URL}?query=${query}&apiKey=${apiAuth}`);
let data = await response.json();
setFoodData(data.results);
}
fetchFood();
}, [query]);
return (
<div>
<input
onChange={(e) => {
setQuery(e.target.value);
}}
value={query}
type="text"
/>
</div>
);
}

Nesting of component:
import { useState } from "react";
import Search from "./components/Search";
import Container from "./components/Container";
import Nav from "./components/Nav";
import "./App.css";

function App() {
const [foodData, setFoodData] = useState([]);
return (
<div className="App">
<Nav />
<Search foodData={foodData} setFoodData={setFoodData} />
<Container>
<FoodList foodData={foodData} />
</Container>
</div>
);
}

export default App;

Container is a parent component and FoodList is the child component. But if we render the container in this
manner, we will get a empty container because the Container by default only returns an empty div (return
<div></div>).
To fix this we have to take the child component and render in that empty div.

By default, the child container (FoodList) is passed as props to the parent Component (Container)
Therefore, we can catch this component as props into the parent component.
i.e.
We can make use of children prop {children}

import styles from "./container.module.css";

export default function Container({ children }) {


return <div className={styles.container}>
{children}
</div>;
}

Now, we can make the container as flex to render two components side by side.
These types of component are structural component as they don’t have any Functional effect.

You might also like