React Coding Practice
Q. Create a multilevel dropdown menu in React?
Input:
[
{
label: "Menu 1",
},
{
label: "Menu 2",
submenu: [{ label: "Sub Menu 1" }, { label: "Sub Menu 2" }],
},
{
label: "Menu 3",
submenu: [
{ label: "Sub Menu 1" },
{ label: "Sub Menu 2" },
{ label: "Sub Menu 3" },
{ label: "Sub Menu 4" },
],
},
{
label: "Menu 4",
submenu: [{ label: "Sub Menu 1" }, { label: "Sub Menu 2" }],
},
];
Answer
```js ```Q. Create a functional component that displays data from https://reqres.in/api/users?
Answer
```js import React, { useEffect, useState } from "react"; import axios from "axios"; export default function App() { const [users, setUsers] = useState([]); useEffect(() => { axios.get("https://reqres.in/api/users?page=1").then((response) => { setUsers(response.data.data); }); }, []); return (-
{users.map((user) => (
<li key={user.id}>
{user.first_name} {user.last_name}
</li>
))}
Q. Write a program to display searched keyword in React?
Answer
```js function App() { const [search, setSearch] = useState(""); return (Update Data from an input
Seached Keyword: {search}
<input
className="input"
type="text"
value={search}
placeholder="Seach Here"
onChange={(e) => setSearch(e.target.value)}
/>
Q. Create a functional component to show an alert message based on user input?
Answer
```js function App() { const [phrase, setPhrase] = useState(""); if (phrase === "Hello React") { alert("You may pass!"); } return (What's the secret phrase?
<input type="text" value={phrase} onChange={(e) => setPhrase(e.target.value)} placeholder="Enter a secret" />Hint: It's Hello React
Q. Create a functional component in react to add two numbers?
Answer
```js function App() { const [number1, setNumber1] = useState(); const [number2, setNumber2] = useState(); const [total, setTotal] = useState(number1 + number2); function calculateTotal() { setTotal(number1 + number2); } return (Adding Two Numbers
<input
type="number"
value={number1}
onChange={(e) => setNumber1(+e.target.value)}
/>
<input
type="number"
value={number2}
onChange={(e) => setNumber2(+e.target.value)}
/>
<button onClick={calculateTotal}>Add Them!</button>
Total: {total}
Q. Create a simple counter in react?
Answer
```js const App = () => { const [counter, setCounter] = useState(0); const handleClick = (type) => { type === "increment" ? setCounter(counter + 1) : setCounter(counter - 1); }; return (Counter: {counter}
<button onClick={() => handleClick("increment")}>Increment</button>
<button onClick={() => handleClick("decrement")}>Decrement</button>
Q. Write a program to pass values to child using context in React?
Answer
```js // Counter.js const { useState, useContext } = React; const CountContext = React.createContext(); const Counter = () => { const { count, increase, decrease } = useContext(CountContext); return (<button onClick={decrease}>Decrement</button> {count} <button onClick={increase}>Increment</button>
); }; ``` ```js // App.js const App = () => { const [count, setCount] = useState(0); const increase = () => { setCount(count + 1); }; const decrease = () => { setCount(count - 1); }; return (Q. Create a ToDo list app using React?
Answer
```js class App extends React.Component { constructor(props) { super(props); this.state = { userInput: "", list: [] }; } // Set a user input value updateInput(value) { this.setState({ userInput: value }); } // Add item if user input in not empty addItem() { if (this.state.userInput !== "") { const userInput = { // Add a random id which is used to delete id: Math.random(), // Add a user value to list value: this.state.userInput }; // Update list const list = [...this.state.list]; list.push(userInput); // reset state this.setState({ list, userInput: "" }); } } // Function to delete item from list use id to delete deleteItem(key) { const list = [...this.state.list]; // Filter values and leave value which we need to delete const updateList = list.filter((item) => item.id !== key); // Update list in state this.setState({ list: updateList }); } render() { return ( <>TODO LIST
<input
type="text"
placeholder="add item . . . "
value={this.state.userInput}
onChange={(item) => this.updateInput(item.target.value)}
/>
<input type="button" onClick={() => this.addItem()} value="ADD" />
-
{/* map over and print items */}
{this.state.list.map((item) => {
return (
<li key={item.id} onClick={() => this.deleteItem(item.id)}>
{item.value}
</li>
);
})}
Q. Create a search filter component in react?
Input:
const people = [
"Shashi Koshy",
"Dhriti Taneja",
"Dipa Mishra",
"Ansh Thakkar",
"Lakshmi Thaker",
"Sushila Matthai",
"Shresth Nigam",
"Bhavana Biswas",
"Vasudha Mangat",
"Priya Saran"
];
Answer
```js function App() { const [searchTerm, setSearchTerm] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const handleChange = (e) => { setSearchTerm(e.target.value); }; React.useEffect(() => { const results = people.filter((person) => person.toLowerCase().includes(searchTerm.toLowerCase()) ); setSearchResults(results); }, [searchTerm]); return (
<input
type="text"
placeholder="Search"
value={searchTerm}
onChange={handleChange}
/>
);
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-search-list-u1s8b?file=/src/index.js)**
-
{searchResults.map((item) => (
- {item} ))}
Q. Create a Fizz Buzz program in React?
Counting incrementally, replacing any number divisible by three with the word "fizz",
and any number divisible by five with the word "buzz".
Answer
```js class FizzBuzz extends React.Component { state = { count: 1 }; handleDecrement = () => { if (this.state.count > 1) { this.setState((prevState) => ({ count: prevState.count - 1 })); } }; handleIncrement = () => { this.setState((prevState) => ({ count: prevState.count + 1 })); }; render() { return (React Fizz Buzz
Counting incrementally, replacing any number divisible by three with the word "fizz", and any number divisible by five with the word "buzz".
{this.state.count % 15 === 0 ? "FizzBuzz" : this.state.count % 3 === 0 ? "Fizz" : this.state.count % 5 === 0 ? "Buzz" : this.state.count}
<button onClick={this.handleDecrement}> - </button> <button onClick={this.handleIncrement}> + </button>Q. Write a program to call child method from parent in React?
Answer
**1. Using React.forwardRef():** ```js import { forwardRef, useRef, useImperativeHandle } from "react"; const Child = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ getMessage() { alert("Message from Child"); } })); returnChild Component
; }); const Parent = () => { const childRef = useRef(); return (
<Child ref={childRef} />
<button onClick={() => childRef.current.getMessage()}>Click</button>
);
};
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-forwardref-3serh?file=/src/index.js)**
**2. Using Class Component:**
```js
class Parent extends React.Component {
constructor(props) {
super(props);
this.child = React.createRef();
}
onClick = () => {
this.child.current.getMessage();
};
render() {
return (
<Child ref={this.child} />
<button onClick={this.onClick}>Click</button>
);
}
}
class Child extends React.Component {
getMessage() {
alert("Message from Child");
}
render() {
return Child Component
; } } ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-createref-t0gud?file=/src/index.js)** **3. Using callback Ref API:** ```js class Parent extends React.Component { render() { return (
<Child ref={(instance) => { this.child = instance; }} />
<button onClick={() => { this.child.getMessage(); }} >
Click
</button>
);
}
}
class Child extends React.Component {
getMessage() {
alert("Message from Child");
}
render() {
return Child Component
; } } ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-callback-ref-api-kp30y?file=/src/index.js)**Q. Write a program to show and hide element in React?
Answer
```js export default function App() { const [show, toggleShow] = React.useState(true); return (
<button onClick={() => toggleShow(!show)}>
Toggle: {show ? "Show" : "Hide"}
</button>
{show &&
);
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-toggle-gipub?file=/src/App.js)**
Hello World!
}Q. How to update the parent state in React?
Answer
**Using function as a Prop:** ```js class Parent extends Component { state = { text: "Click Me !" }; // Function to update state handleUpdate = (newState) => { this.setState({ text: newState }); }; render() { return (
<Child
text={this.state.text}
// Passing a function to child
updateState={this.handleUpdate}
></Child>
);
}
}
class Child extends Component {
render() {
return (
<button
// Using parent props to update parent state
onClick={() => this.props.updateState("Parent State Changed")}
>
{this.props.text}
</button>
);
}
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/react-function-as-a-prop-2unfh?file=/src/App.js)**
Q. How do I reference a local image in React?
Answer
```js import React, { Component } from "react"; import logo from "./react_photo-goose.jpg"; export default class Header extends Component { render() { return (
<img src={logo} width="100%" alt="Googe Pic" />
Q. How to access a child state in React?
Answer
**Using createRef():** ```js export default class App extends React.Component { constructor(props) { super(props); this.ChildElement = React.createRef(); } handleClick = () => { const childelement = this.ChildElement.current; alert("Current state of child is: " + childelement.state.name); }; render() { return (
<Child ref={this.ChildElement} />
);
}
}
class Child extends React.Component {
state = {
name: "Hello React"
};
render() {
return <></>;
}
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/access-child-state-p2iip?file=/src/App.js)**