hooks in React<\/a>, error boundaries, and React patterns. This section aims to prepare candidates comprehensively, whether they are freshers or experienced professionals looking to refresh their skills.<\/p>\n\n\n\nQ31. Write a simple React component that takes props.<\/h3>\n\n\n\n Answer<\/strong>: This component, Greeting, takes a name prop and displays a greeting message.<\/p>\n\n\n\nimport React from 'react';\n\nconst Greeting = ({ name }) => {\n return <h1>Hello, {name}!<\/h1>;\n};\n\nexport default Greeting;\n<\/code><\/pre>\n\n\n\nQ32. How do you pass data from a child component to a parent component?<\/h3>\n\n\n\n Answer<\/strong>: In this code, the Child component sends data back to the Parent component using a callback function passed as a prop.<\/p>\n\n\n\nimport React, { useState } from 'react';\n\nconst Child = ({ onSendData }) => {\n const handleClick = () => {\n onSendData('Data from Child');\n };\n\n return <button onClick={handleClick}>Send Data to Parent<\/button>;\n};\n\nconst Parent = () => {\n const [data, setData] = useState('');\n\n return (\n <div>\n <h2>Received: {data}<\/h2>\n <Child onSendData={setData} \/>\n <\/div>\n );\n};\n\nexport default Parent;\n<\/code><\/pre>\n\n\n\nQ33. Write a code for a component that uses props to customize styling.<\/h3>\n\n\n\n Answer:<\/strong> This StyledComponent demonstrates how to customize styles dynamically using a color prop.<\/p>\n\n\n\nimport React from 'react';\n\nconst StyledComponent = ({ color }) => {\n return <div style={{ color }}>This is a styled component!<\/div>;\n};\n\nexport default StyledComponent;\n<\/code><\/pre>\n\n\n\nQ34. How do you handle events in React? Explain with a code.<\/h3>\n\n\n\n Answer<\/strong>: In this EventHandlingComponent, a button click triggers an alert, showcasing how to handle events in React.<\/p>\n\n\n\nimport React from 'react';\n\nconst EventHandlingComponent = () => {\n const handleClick = () => {\n alert('Button clicked!');\n };\n\n return <button onClick={handleClick}>Click Me<\/button>;\n};\n\nexport default EventHandlingComponent;\n<\/code><\/pre>\n\n\n\nQ35. Create a simple controlled component.<\/h3>\n\n\n\n Answer<\/strong>: The ControlledInput component given in this code maintains its input state with the help of the useState hook, ensuring the input value is controlled by React.<\/p>\n\n\n\nimport React, { useState } from 'react';\n\nconst ControlledInput = () => {\n const [value, setValue] = useState('');\n\n const handleChange = (e) => {\n setValue(e.target.value);\n };\n\n return <input type=\"text\" value={value} onChange={handleChange} \/>;\n};\n\nexport default ControlledInput;\n<\/code><\/pre>\n\n\n\nQ36. Write a functional component with state.<\/h3>\n\n\n\n Answer<\/strong>: This CounterComponent demonstrates state management using the useState hook to update and display a count value.<\/p>\n\n\n\nimport React, { useState } from 'react';\n\nconst CounterComponent = () => {\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <h2>Count: {count}<\/h2>\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\n <\/div>\n );\n};\n\nexport default CounterComponent;\n<\/code><\/pre>\n\n\n\nQ37. How do you implement conditional rendering in React?<\/h3>\n\n\n\n Answer<\/strong>: In this ConditionalRenderingComponent, the visibility of an element is toggled based on the state, showcasing conditional rendering.<\/p>\n\n\n\nimport React, { useState } from 'react';\n\nconst ConditionalRenderingComponent = () => {\n const [isVisible, setIsVisible] = useState(true);\n\n return (\n <div>\n {isVisible && <h2>This is visible<\/h2>}\n <button onClick={() => setIsVisible(!isVisible)}>\n Toggle Visibility\n <\/button>\n <\/div>\n );\n};\n\nexport default ConditionalRenderingComponent;\n<\/code><\/pre>\n\n\n\nQ38. Create a component that uses effect hooks.<\/h3>\n\n\n\n Answer:<\/strong> The EffectComponent utilizes the useEffect hook to log changes to the count state whenever it updates.<\/p>\n\n\n\nimport React, { useEffect, useState } from 'react';\n\nconst EffectComponent = () => {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n console.log(`Count updated: ${count}`);\n }, [count]);\n\n return (\n <div>\n <h2>Count: {count}<\/h2>\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\n <\/div>\n );\n};\n\nexport default EffectComponent;\n<\/code><\/pre>\n\n\n\nQ39. How do you create a form with controlled components?<\/h3>\n\n\n\n Answer:<\/strong> This FormComponent demonstrates a controlled form where the input state is managed using React, displaying an alert upon submission.<\/p>\n\n\n\nimport React, { useState } from 'react';\n\nconst FormComponent = () => {\n const [name, setName] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n alert(`Name: ${name}`);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={name} \n onChange={(e) => setName(e.target.value)} \n placeholder=\"Enter your name\" \n \/>\n <button type=\"submit\">Submit<\/button>\n <\/form>\n );\n};\n\nexport default FormComponent;<\/code><\/pre>\n\n\n\nQ40. Write a simple React component that demonstrates lifecycle methods.<\/h3>\n\n\n\n Answer<\/strong>: The lifecycleExample class component mentioned in the code below showcases lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.<\/p>\n\n\n\nimport React, { Component } from 'react';\n\nclass LifecycleExample extends Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n\n componentDidMount() {\n console.log('Component mounted');\n }\n\n componentDidUpdate() {\n console.log('Component updated');\n }\n\n componentWillUnmount() {\n console.log('Component will unmount');\n }\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n return (\n <div>\n <h2>Count: {this.state.count}<\/h2>\n <button onClick={this.increment}>Increment<\/button>\n <\/div>\n );\n }\n}\n\nexport default LifecycleExample;\n<\/code><\/pre>\n\n\n\n<\/span>Best Companies to Apply for ReactJS Jobs<\/span><\/h2>\n\n\n\nBelow is a table of some of the best companies to apply for ReactJS positions, along with their average salary ranges: <\/p>\n\n\n\nCompany Name<\/strong><\/td>Average Salary (Per Annum)<\/strong><\/td><\/tr>Google<\/strong><\/td>\u20b912 LPA – \u20b920 LPA<\/td><\/tr> Microsoft<\/strong><\/td>\u20b910 LPA – \u20b918 LPA<\/td><\/tr> Amazon<\/strong><\/td>\u20b99 LPA – \u20b915 LPA<\/td><\/tr> Facebook<\/strong><\/td>