Show List
Tutorials > React > React Coding Questions

React Coding Questions


  • Write a component that renders a list of items with a delete button next to each item.
jsx
Copy code
import React, { useState } from 'react';

function ListItem({ item, onDelete }) {
  return (
    <div>
      {item}
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

function List({ items }) {
  const [listItems, setListItems] = useState(items);

  const handleDelete = (index) => {
    const newList = listItems.filter((item, i) => i !== index);
    setListItems(newList);
  };

  return (
    <div>
      {listItems.map((item, index) => (
        <ListItem key={index} item={item} onDelete={() => handleDelete(index)} />
      ))}
    </div>
  );
}
  • Write a component that takes in a prop called initialCount and renders a button that, when clicked, increments a counter and displays the count.
jsx
Copy code
import React, { useState } from 'react';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <div>Count: {count}</div>
    </div>
  );
}
  • Write a component that takes in a prop called message and renders a button that, when clicked, displays an alert with the message.
jsx
Copy code
import React from 'react';

function AlertButton({ message }) {
  const handleClick = () => {
    alert(message);
  };

  return <button onClick={handleClick}>Show Alert</button>;
}
  • Write a component that renders a form with a single text input and a submit button. When the form is submitted, the component should display an alert with the value of the text input.
jsx
Copy code
import React, { useState } from 'react';

function Form() {
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(text);
  };

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}
  • Write a component that takes in a prop called color and renders a div with that color as the background.
jsx
Copy code
import React from 'react';

function ColoredDiv({ color }) {
  return <div style={{ backgroundColor: color, height: '100px', width: '100px' }} />;
}
  • Write a component that renders a checkbox that, when clicked, toggles a boolean state value.
jsx
Copy code
import React, { useState } from 'react';

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return <input type="checkbox" checked={isChecked} onChange={handleChange} />;
}

  • Write a component that takes in an array of objects, and renders a table with columns for each object property.
jsx
Copy code
import React from 'react';

function Table({ data }) {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map((key) => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            {Object.values(item).map((value, index) => (
              <td key={index}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
  • Write a component that takes in a string, and renders a button that, when clicked, displays a popover with the string as the content.
jsx
Copy code
import React, { useState } from 'react';

function PopoverButton({ content }) {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  const handleClick = () => {
    setIsPopoverOpen(!isPopoverOpen);
  };

  return (
    <div>
      <button onClick={handleClick}>Show Popover</button>
      {isPopoverOpen && <div className="popover">{content}</div>}
    </div>
  );
}
  • Write a component that takes in an array of numbers, and renders a bar chart with a bar for each number.
jsx
Copy code
import React from 'react';

function BarChart({ data }) {
  const max = Math.max(...data);
  const height = 200;
  const width = 400;

  return (
    <svg viewBox={`0 0 ${width} ${height}`}>
      {data.map((value, index) => (
        <rect
          key={index}
          x={(index * width) / data.length}
          y={height - (value / max) * height}
          width={width / data.length - 1}
          height={(value / max) * height}
        />
      ))}
    </svg>
  );
}
  • Write a component that takes in a prop called name and renders a greeting with that name.
jsx
Copy code
import React from 'react';

function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}
  • Write a component that takes in an array of numbers, and renders the sum of those numbers.
jsx
Copy code
import React from 'react';

function Sum({ numbers }) {
  const sum = numbers.reduce((acc, curr) => acc + curr, 0);

  return <div>Sum: {sum}</div>;
}
  • Write a component that takes in a prop called text and renders a div with that text, with the first letter of each word in uppercase.
jsx
Copy code
import React from 'react';

function UppercaseWords({ text }) {
  const words = text.split(' ');

  return (
    <div>
      {words.map((word, index) => (
        <span key={index}>{word.charAt(0).toUpperCase() + word.slice(1)} </span>
      ))}
    </div>
  );
}
  • Write a component that takes in an array of strings, and renders a select box with options for each string.
jsx
Copy code
import React from 'react';

function SelectBox({ options }) {
  return (
    <select>
      {options.map((option, index) => (
        <option key={index}>{option}</option>
      ))}
    </select>
  );
}
  • Write a component that takes in a prop called color and renders a div with that color as the background.
jsx
Copy code
import React from 'react';

function ColoredBox({ color }) {
  return <div style={{ backgroundColor: color, width: '100px', height: '100px' }} />;
}
  • Write a component that takes in an array of objects with title and content properties, and renders an accordion with a title for each object and its content inside.
jsx
Copy code
import React, { useState } from 'react';

function Accordion({ items }) {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleClick = (index) => {
    setActiveIndex(index === activeIndex ? null : index);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <div onClick={() => handleClick(index)}>{item.title}</div>
          {activeIndex === index && <div>{item.content}</div>}
        </div>
      ))}
    </div>
  );
}
  • Write a component that takes in a string, and renders a form with an input that allows the user to edit that string.
jsx
Copy code
import React, { useState } from 'react';

function EditableText({ text }) {
  const [value, setValue] = useState(text);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <input value={value} onChange={handleChange} />
    </form>
  );
}
  • Write a component that takes in a prop called items and renders a list of those items, with the ability to add and remove items.
jsx
Copy code
import React, { useState } from 'react';

function List({ items }) {
  const [listItems, setListItems] = useState(items);

  const addItem = () => {
    setListItems([...listItems, '']);
  };

  const removeItem = (index) => {
    setListItems(listItems.filter((item, i) => i !== index));
  };

  const handleChange = (event, index) => {
    const newItems = [...listItems];
    newItems[index] = event.target.value;
    setListItems(newItems);
  };

  return (
    <div>
      {listItems.map((item, index) => (
        <div key={index}>
          <input value={item} onChange={(event) => handleChange(event, index)} />
          <button onClick={() => removeItem(index)}>Remove</button>
        </div>
      ))}
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}
    Leave a Comment

  • captcha text