Experiment 12: ReactJS – Conditional Rendering, Rendering Lists, React Forms

Write a program for conditional rendering. 


 App.js


import React, { useState } from "react";


function App() {

  const [isLoggedIn, setIsLoggedIn] = useState(false);


  return (

    <div style={{ padding: "20px", fontFamily: "Arial" }}>

      <h2>Conditional Rendering Example</h2>


      {isLoggedIn ? (

        <h3>Welcome back, User! 😊</h3>

      ) : (

        <h3>Please login to continue.</h3>

      )}


      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>

        {isLoggedIn ? "Logout" : "Login"}

      </button>

    </div>

  );

}


export default App;



UI/UX based:

import React, { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h2 style={styles.title}>Welcome 👋</h2>

        {isLoggedIn ? (
          <p style={styles.success}>You are logged in 😊</p>
        ) : (
          <p style={styles.info}>Please login to continue</p>
        )}

        <button
          style={isLoggedIn ? styles.logoutBtn : styles.loginBtn}
          onClick={() => setIsLoggedIn(!isLoggedIn)}
        >
          {isLoggedIn ? "Logout" : "Login"}
        </button>
      </div>
    </div>
  );
}

const styles = {
  page: {
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    background: "linear-gradient(135deg, #e3f2fd, #fce4ec)"
  },
  card: {
    background: "#fff",
    padding: "30px 40px",
    borderRadius: "14px",
    textAlign: "center",
    boxShadow: "0 8px 20px rgba(0,0,0,0.15)",
    width: "280px"
  },
  title: {
    marginBottom: "10px"
  },
  info: {
    color: "#555",
    marginBottom: "20px"
  },
  success: {
    color: "green",
    fontWeight: "bold",
    marginBottom: "20px"
  },
  loginBtn: {
    background: "#1976d2",
    color: "#fff",
    border: "none",
    padding: "10px 20px",
    borderRadius: "20px",
    cursor: "pointer",
    width: "100%"
  },
  logoutBtn: {
    background: "#d32f2f",
    color: "#fff",
    border: "none",
    padding: "10px 20px",
    borderRadius: "20px",
    cursor: "pointer",
    width: "100%"
  }
};

export default App;


Write a program for rendering lists. (UI/UX)

import React from "react";

function App() {
  const students = ["Arjun", "Meena", "Rahul", "Kavya", "Suresh"];

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h2 style={styles.title}>Student List</h2>

        <ul style={styles.list}>
          {students.map((name, index) => (
            <li key={index} style={styles.item}>
              👤 {name}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

const styles = {
  page: {
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    background: "#f4f6f8"
  },
  card: {
    background: "#fff",
    padding: "25px 35px",
    borderRadius: "12px",
    boxShadow: "0 6px 15px rgba(0,0,0,0.1)",
    width: "300px"
  },
  title: {
    textAlign: "center",
    marginBottom: "15px"
  },
  list: {
    listStyle: "none",
    padding: 0,
    margin: 0
  },
  item: {
    padding: "10px",
    marginBottom: "8px",
    borderRadius: "8px",
    background: "#e3f2fd",
    textAlign: "center",
    fontWeight: "500"
  }
};

export default App;


12.c . Create React Forms


App.js



import React, { useState } from "react";

function StudentForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    gender: "",
    course: "",
    skills: [],
    about: ""
  });

  // Handle text, email, password, select, textarea
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  // Handle radio button
  const handleGenderChange = (e) => {
    setFormData({
      ...formData,
      gender: e.target.value
    });
  };

  // Handle checkbox
  const handleSkillChange = (e) => {
    const { value, checked } = e.target;

    if (checked) {
      setFormData({
        ...formData,
        skills: [...formData.skills, value]
      });
    } else {
      setFormData({
        ...formData,
        skills: formData.skills.filter(skill => skill !== value)
      });
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Submitted:", formData);
    alert("Form Submitted Successfully!");
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>Student Registration Form</h2>

      <form onSubmit={handleSubmit}>

        {/* Text Field */}
        <div>
          <label>Name: </label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
        </div>

        {/* Email Field */}
        <div>
          <label>Email: </label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </div>

        {/* Password Field */}
        <div>
          <label>Password: </label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
          />
        </div>

        {/* Radio Buttons */}
        <div>
          <label>Gender: </label>
          <input
            type="radio"
            name="gender"
            value="Male"
            checked={formData.gender === "Male"}
            onChange={handleGenderChange}
          /> Male
          
          <input
            type="radio"
            name="gender"
            value="Female"
            checked={formData.gender === "Female"}
            onChange={handleGenderChange}
          /> Female
        </div>

        {/* Dropdown */}
        <div>
          <label>Course: </label>
          <select
            name="course"
            value={formData.course}
            onChange={handleChange}
          >
            <option value="">Select Course</option>
            <option value="CSE">CSE</option>
            <option value="ECE">ECE</option>
            <option value="MECH">MECH</option>
          </select>
        </div>

        {/* Checkboxes */}
        <div>
          <label>Skills: </label>
          <input
            type="checkbox"
            value="Java"
            onChange={handleSkillChange}
          /> Java
          
          <input
            type="checkbox"
            value="Python"
            onChange={handleSkillChange}
          /> Python
          
          <input
            type="checkbox"
            value="React"
            onChange={handleSkillChange}
          /> React
        </div>

        {/* Textarea */}
        <div>
          <label>About You: </label>
          <textarea
            name="about"
            value={formData.about}
            onChange={handleChange}
          />
        </div>

        <br />
        <button type="submit">Submit</button>

      </form>
    </div>
  );
}

function App() {
  return (
    <div>
      <Form />   {/* Using the Form component */}
    </div>
  );
}

export default App;

Comments

Post a Comment

Popular posts from this blog

Experiment 1: Node.js

  Introduction to Node.js Node.js is a runtime environment that allows us to run JavaScript outside the browser , mainly on  the server.  With Node.js, developers can use the same language—JavaScript—for both the front end and back end, which makes development simpler and quicker. Node.js is designed to handle many users at the same time without slowing down. It uses a non-blocking and event-driven model, meaning it does not wait for one task to finish before starting another. Instead, it responds to events as they happen. This makes Node.js perfect for applications that require quick responses and continuous communication. Applications of Node.js Real-time chat applications Video streaming platforms Online gaming servers REST APIs and backend services Single-page applications (SPAs) IoT (Internet of Things) applications Collaborative tools like shared editors or dashboards Architecture of Node.js Node.js follows a single-threaded, event-driven archi...
Read more

Experiment 10: ReactJS – Render HTML, JSX, Components – function & Class

  Write a program to render HTML to a web page. Create a React Application Open Command Prompt / Terminal and run: npx create-react-app myapp cd myapp npm start Browser opens automatically at: http://localhost:3000 React is successfully installed! myapp  ├── node_modules  ├── public  │    └── index.html  ├── src  │    ├── App.js  │    ├── index.js  │    └── App.css  └── package.json index.html <!DOCTYPE html> <html> <head>   <title>ReactJS – Render HTML</title>   <!-- React CDN -->   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>   <!-- Babel -->   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>   <h2>ReactJS Experimen...
Read more

Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware

  6 Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.  Below is a simple Express.js program that demonstrates: Defining routes Handling routes Route parameters Query parameters URL building 1. Install Express open command prompt mkdir abc cd abc npm init -y npm install express 2: Create app.js   ( Simple program to start with) notepad app.js                       const express = require('express'); const app = express(); app.get('/', (req, res) => {     res.send('Express routing working!'); }); app.listen(3000, () => {     console.log('Server running on http://localhost:3000'); }); save and close. 3: Run Server node app.js Open browser: type link or url :            http://localhost:3000   to see output ROUTING AND QUER...
Read more