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;