Introduction
React is built with JavaScript, so a good understanding of JavaScript is essential for working with React effectively. React components use JavaScript variables, functions, arrays, objects, conditions, loops, and methods to create dynamic user interfaces. In this chapter, you will practice using JavaScript directly inside React components. The questions progress from basic variables and functions to practical examples using arrays, objects, conditions, and event-related logic. JavaScript in react practice questions with solutions help to build concepts.
1. How do you create a JavaScript variable inside a React component?
You can create JavaScript variables inside a React component just like you do in normal JavaScript.
Example:
function App() {
const name = "Aman";
return <h1>Hello, {name}</h1>;
}
export default App;
Here:
const name = "Aman";
is a normal JavaScript variable.
It is then displayed in JSX using:
{name}
Output:
Hello, Aman
Answer: JavaScript variables can be declared inside React components and used in JSX through {}.
2. How do you use a JavaScript function in React?
You can create and call JavaScript functions inside a React component.
Example:
function App() {
function greet() {
return "Welcome to React!";
}
return <h1>{greet()}</h1>;
}
export default App;
The function:
greet()
returns a string that is displayed inside JSX.
Output:
Welcome to React!
Answer: JavaScript functions can be created inside React components and called from JSX or other component logic.
3. How do you use JavaScript conditions in React?
JavaScript conditions can be used to decide what should be displayed.
For example, the ternary operator can be used inside JSX:
function App() {
const age = 20;
return (
<h1>
{age >= 18 ? "Adult" : "Minor"}
</h1>
);
}
export default App;
Since age is 20, the output is:
Adult
You can also use normal if statements before the return:
function App() {
const isLoggedIn = true;
let message;
if (isLoggedIn) {
message = "Welcome Back!";
} else {
message = "Please Login";
}
return <h1>{message}</h1>;
}
Answer: JavaScript conditions such as if, else, and the ternary operator can control React UI output.
4. How do you use JavaScript arrays in React?
Arrays are commonly used to store multiple values.
Example:
function App() {
const courses = ["React", "Node.js", "Python"];
return (
<div>
<h1>Courses</h1>
<p>{courses[0]}</p>
<p>{courses[1]}</p>
<p>{courses[2]}</p>
</div>
);
}
export default App;
Output:
Courses
React
Node.js
Python
You can also use array methods such as map() to generate multiple elements.
function App() {
const courses = ["React", "Node.js", "Python"];
return (
<ul>
{courses.map((course) => (
<li key={course}>{course}</li>
))}
</ul>
);
}
Answer: JavaScript arrays can store data and can be used to generate dynamic React elements.
5. How do you use JavaScript objects in React?
Objects can store related information as key-value pairs.
Example:
function App() {
const student = {
name: "Riya",
age: 20,
course: "React.js"
};
return (
<div>
<h2>{student.name}</h2>
<p>Age: {student.age}</p>
<p>Course: {student.course}</p>
</div>
);
}
export default App;
Output:
Riya
Age: 20
Course: React.js
Object properties are accessed using:
student.name
student.age
student.course
Answer: JavaScript objects are useful for storing structured data that can be displayed in React.
6. How do you use JavaScript string methods in React?
Normal JavaScript string methods can be used inside React components.
Example:
function App() {
const name = "react";
return <h1>{name.toUpperCase()}</h1>;
}
export default App;
Output:
REACT
Another example:
function App() {
const course = "React.js";
return <p>Length: {course.length}</p>;
}
Output:
Length: 8
React does not replace JavaScript methods. You can use normal JavaScript operations within your component logic.
Answer: JavaScript string methods such as toUpperCase() and properties such as length can be used in React.
7. How do you use JavaScript array methods in React?
JavaScript array methods are very useful when working with data in React.
For example, map() can generate a list:
function App() {
const students = ["Aman", "Riya", "Rahul"];
return (
<ul>
{students.map((student) => (
<li key={student}>{student}</li>
))}
</ul>
);
}
export default App;
You can also use methods such as:
map()
filter()
find()
includes()
For example:
function App() {
const numbers = [10, 20, 30, 40];
const result = numbers.filter((number) => number > 20);
return <p>{result.join(", ")}</p>;
}
Output:
30, 40
Answer: JavaScript array methods help React components process and display collections of data.
8. How do you use JavaScript operators in React?
JavaScript operators can be used inside React components.
Example:
function App() {
const price = 500;
const quantity = 3;
const total = price * quantity;
return <h2>Total: ₹{total}</h2>;
}
export default App;
Output:
Total: ₹1500
You can use operators such as:
+
-
*
/
%
>
<
===
&&
||
For example:
const age = 20;
<p>{age >= 18 ? "Eligible" : "Not Eligible"}</p>
Answer: React components can use normal JavaScript operators for calculations and logical decisions.
9. How do you use JavaScript destructuring in a React component?
Destructuring allows you to extract values from arrays or objects into separate variables.
Example with an object:
function App() {
const student = {
name: "Aman",
course: "React.js"
};
const { name, course } = student;
return (
<div>
<h2>{name}</h2>
<p>{course}</p>
</div>
);
}
export default App;
Instead of repeatedly writing:
student.name
student.course
you can use:
name
course
Destructuring becomes especially useful when working with React props.
Answer: Destructuring extracts values from JavaScript objects or arrays into convenient variables.
10. Build a React component using multiple JavaScript concepts
Let’s combine variables, objects, arrays, functions, conditions, and array methods.
function App() {
const student = {
name: "Riya",
age: 21,
course: "React.js"
};
const skills = ["HTML", "CSS", "JavaScript", "React"];
function getStatus() {
return student.age >= 18 ? "Adult" : "Minor";
}
return (
<div>
<h1>Student Profile</h1>
<h2>{student.name}</h2>
<p>Age: {student.age}</p>
<p>Course: {student.course}</p>
<p>Status: {getStatus()}</p>
<h3>Skills</h3>
<ul>
{skills.map((skill) => (
<li key={skill}>{skill}</li>
))}
</ul>
</div>
);
}
export default App;
This example uses several JavaScript concepts:
- Variables
- Objects
- Arrays
- Functions
- Ternary operator
map()- Object property access
- JSX expressions
Answer: React components can combine normal JavaScript features with JSX to create dynamic user interfaces.
Key Takeaways
- React is built around JavaScript, so JavaScript knowledge is essential.
- Variables can be created directly inside React components.
- JavaScript functions can be used in React components.
- Conditions such as
if,else, and ternary operators can control UI output. - Arrays are commonly used to store and display collections of data.
- Objects are useful for storing structured information.
- JavaScript string methods work normally inside React components.
- Array methods such as
map()andfilter()are frequently used in React. - JavaScript operators can be used for calculations and logical operations.
- Destructuring makes it easier to work with objects and arrays.
- Strong JavaScript fundamentals make learning advanced React concepts easier.
FAQs
1. Do I need JavaScript to learn React.js?
Yes. React is a JavaScript library, so understanding JavaScript fundamentals is very important for learning React effectively.
2. Can I use normal JavaScript inside a React component?
Yes. You can use variables, functions, conditions, arrays, objects, operators, and many other JavaScript features inside React components.
3. Can I use map() in React?
Yes. map() is commonly used to convert an array of data into multiple JSX elements.
Example:
{courses.map((course) => (
<li key={course}>{course}</li>
))}
4. Can I use if and else in React?
Yes. Normal JavaScript if and else statements can be used inside the component before the return statement.
5. Can JavaScript objects be used in React?
Yes. Objects are commonly used to store structured data.
const user = {
name: "Aman",
age: 20
};
Their properties can then be used in JSX.
6. Why is map() important in React?
map() is useful for creating multiple JSX elements from an array, such as displaying a list of students, products, courses, or menu items.
7. What JavaScript concepts should I learn before advanced React?
You should be comfortable with variables, functions, arrays, objects, destructuring, conditions, loops, array methods, template literals, operators, and ES6+ features.
5. SEO Package
SEO Title: JavaScript in React Practice Questions
Meta Description: Learn JavaScript in React with 10 solved practice questions covering variables, functions, arrays, objects, conditions, and methods.
SEO Slug: javascript-in-react-practice-questions
Focus Keywords: JavaScript in React practice questions, JavaScript React practice, React JavaScript basics, JavaScript with React, React variables, React functions, React arrays, React objects
Tags: React.js, JavaScript, JavaScript in React, React Practice Questions, React Fundamentals, JSX, Frontend Development, ES6
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
