Как экспортировать функцию реакт

Рейтинг: 0Ответов: 1Опубликовано: 14.04.2023

мне нужно экспортировать функцию handleSearchChange, которая фильтрует массив курсов, который я получаю с бэка. Как можно это сделать

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { AppRoute } from '../../const';

export default function HeaderSearch() {
  const [activeSection, setActiveSection] = useState(null);
  const [searchValue, setSearchValue] = useState('');
  const [courses, setCourses] = useState([]);
  
  useEffect(() => {
    const fetchCourses = async () => {
      const data = await (
        await fetch(
          "https://sokratapp.site/wp-json/wp/v2/courses"
        )
      ).json();

      setCourses(data[0].courses);
    };

    fetchCourses();
  }, []);

  const handleClick = (section) => {
    setActiveSection(section);
  }

  const handleSearchChange = (event) => {
    setSearchValue(event.target.value);
  }

  const filteredCourses = courses.filter((course) => {
    return course.title.toLowerCase().includes(searchValue.toLowerCase());
  });

  const courseItems = filteredCourses.map((d) => {
    return (
      <li key={d.id} className='header-search__item'>
        <p className="header-search__text">{d.title}</p>
        <Link className="header-search__link" to={d.guid}>Смотреть</Link>
      </li>
    )
  });

  return (
    <div className="header-search">
      <div className="header-search__titles">
        <div className={`header-search__courses ${activeSection === 'courses' ? 'active' : ''}`} onClick={() => handleClick('courses')}>Курсы</div>
        <div className={`header-search__teachers ${activeSection === 'teachers' ? 'active' : ''}`} onClick={() => handleClick('teachers')}>Преподаватели</div>
        <div className={`header-search__specialists ${activeSection === 'specialists' ? 'active' : ''}`} onClick={() => handleClick('specialists')}>Специалисты</div>
        <div className={`header-search__companies ${activeSection === 'companies' ? 'active' : ''}`} onClick={() => handleClick('companies')}>Компании</div>
      </div>
      {activeSection === 'courses' &&
      <div>
        <ul  className="header-search__list">
          {courseItems}
        </ul>
      </div>
      }
    </div>
  );
}

Импортировать нужно в другой файл, в метод onChange

{isSearchVisible && <input type="text" placeholder="Например, психология" className="header-utils__input" onChange={}/>}
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Из компонента который экспортируется экспортировать функцию не получится, но можете свою функцию перенести за пределы компонента там экспортировать и также использовать.

Пример:

import { useState } from "react";

export const Test = () => {
  const [value, setValue] = useState("");

  return <input value={value} onChange={(e) => onChange(e, setValue)} />;
};

export const onChange = (e, cb) => {
  cb(e.target.value);
};

import { useState } from "react";
import { onChange, Test } from "./Test";

export default function App() {
  const [val, setVal] = useState("");
  return (
    <div className="App">
      <Test />
      <input value={val} onChange={(e) => onChange(e, setVal)} />
    </div>
  );
}

Ссылка на пример