React - section to component code structure

Question

To move the search-history section into a new component named SearchedComponent, you can create a new file for the component, let's say SearchedComponent.jsx, and then import and use it in your Parent component. Here's an example of how you can structure your files:

Create a new file named SearchedComponent.jsx:

// SearchedComponent.jsx
import React from 'react';

const SearchedComponent = ({ history }) => {
  return (
    <div className="search-history">
      <h3>Search History</h3>
      <ul>
        {history.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchedComponent;

 

Update your Parent component to import and use SearchedComponent:

// ParentComponent.jsx
import React, { useState, useEffect } from 'react';
import { css } from '@emotion/react';
import ParentHeader from './ParentHeader';
import SearchedComponent from './SearchedComponent'; // Import the new component

const ParentComponent = () => {
  // ... (existing code)

  return (
    <>
      <ParentHeader />

      <div className="parent-prompt-box">
        {/* ... (existing code) */}
      </div>

      <div className="parent-prompt-search">
        <div className="container-flex">
          {/* ... (existing code) */}

          {/* Replace the existing search-history with the SearchedComponent */}
          <SearchedComponent history={history} />
        </div>
      </div>
    </>
  );
};

export default ParentComponent;