I am working with typescript I want to make section name dynamic when new post then title change to “ARTIKEL BARU” or “BERITA BARU” and when choose old post title become only “ARTIKEL” or “BERITA”.I not make this code from start I only handed this code. I try delete word “TERBARU” on if else but nothing change how to make change to section title.

heres the code

table code

import { useNavigate } from 'react-router';

import { Space, Card, Table, Button, Typography } from 'antd';

import { HomepageProps } from '@customTypes/dashboard';

import { ADD_CAROUSEL, EDIT_CAROUSEL } from '@constants/urls';

const { Title } = Typography;

const CarouselCard = ({ data }: { data: HomepageProps[] }) => {
  const navigate = useNavigate();

  const columns = [
    {
      title: 'Section',
      key: 'otherData',
      dataIndex: 'otherData',
      render: (text: { section: string }) => text?.section,
    },
    {
      title: 'Judul Konten',
      key: 'title',
      dataIndex: 'title',
    },
    {
      title: 'Deskripsi Konten',
      key: 'content',
      dataIndex: 'content',
    },
    {
      title: 'Aksi',
      key: 'action',
      render: (_: string, record: any) => (
        <Space align="end">
          <Button
            type="link"
            className="button-link-grey"
            onClick={() => navigate(EDIT_CAROUSEL + '/' + record.id)}
          >
            Ubah
          </Button>
        </Space>
      ),
    },
  ];
  return (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <Card
        title={
          <Space align="end">
            <Title level={4} style={{ marginBottom: 0 }}>
              Carousel
            </Title>
            {data.length < 3 && (
              <Button onClick={() => navigate(ADD_CAROUSEL)}>
                Tambah Baru
              </Button>
            )}
          </Space>
        }
      >
        <Table columns={columns} dataSource={data} pagination={false} />
      </Card>
    </Space>
  );
};

export default CarouselCard;

edit code

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router';

import {
  Card,
  Row,
  Col,
  Space,
  Button,
  message,
  Input,
  Typography,
  Select,
} from 'antd';

import CustomTitle from '@components/Title';

import { DASHBOARD } from '@constants/urls';

import fetchRequest from '@utils/fetcher';

const { TextArea } = Input;
const { Title } = Typography;
const { Option } = Select;

type TitleProps = {
  id: string;
  title: string;
  type: 'news' | 'article' | 'publication';
};

const EditCarousel = () => {
  const [id, setId] = useState('');
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [articleList, setArticleList] = useState<TitleProps[]>([]);
  const [newsList, setNewsList] = useState<TitleProps[]>([]);
  const [publicationList, setPublicationList] = useState<TitleProps[]>([]);
  const [section, setSection] = useState('');
  


  const navigate = useNavigate();
  const location = useLocation();

  const handleSubmit = async () => {
    const titleId = [...articleList, ...newsList, ...publicationList].filter(
      (al) => al.id === title
    )[0];

    let sec = section;

    if (section === '') {
      if (titleId.type === 'news') {
        sec = 'BERITA TERBARU';
      } else if (titleId.type === 'article') {
        sec = 'ARTIKEL TERBARU';
      } else if (titleId.type === 'publication') {
        sec = 'PUBLIKASI TERBARU';
      }
    }

    const param = {
      title: titleId.title,
      content,
      section: sec,
      originId: title,
    };

    try {
      await fetchRequest({
        method: 'POST',
        path: 'resource/homepage/carousel',
        data: id !== '' ? { ...param, id } : param,
      }).then((response) => {
        if (!response.error) {
          navigate(DASHBOARD);
        } else {
          message.error(response.error.message);
        }
      });
    } catch (error) {
      message.error(error.message);
    }
  };

  const getContent = async (id: string) => {
    try {
      await fetchRequest({
        method: 'GET',
        path: 'resource?id=' + id,
      }).then((response) => {
        if (!response.error) {
          setTitle(response.title || '');
          setContent(response.content || '');
          setSection(response?.otherData?.section || '');
        } else {
          message.error(response.error.message);
        }
      });
    } catch (error) {
      message.error(error.message);
    }
  };

  const getTitleList = async (type: string) => {
    try {
      await fetchRequest({
        method: 'GET',
        path: 'info/no-content?types=' + type,
      }).then((response) => {
        if (!response.error) {
          if (type === 'news') {
            setNewsList(response || []);
          } else if (type === 'article') {
            setArticleList(response || []);
          } else if (type === 'publication') {
            setPublicationList(response || []);
          }
        } else {
          message.error(response.error.message);
        }
      });
    } catch (error) {
      message.error(error.message);
    }
  };

  const getDataList = async () => {
    let type = '';

    if (section === 'ARTIKEL TERBARU') {
      type = 'article';
    } else if (section === 'PUBLIKASI TERBARU') {
      type = 'publication';
    } else if (section === 'BERITA TERBARU') {
      type = 'news';
    }

    if (type === '') {
      getTitleList('news');
      getTitleList('publication');
      getTitleList('article');
    } else {
      getTitleList(type);
    }
  };

  useEffect(() => {
    const isEdit =
      location.pathname.split('/').filter((pn) => pn === 'edit').length > 0;

    if (isEdit) {
      const path = location.pathname.split('/');
      const testimonyId = path[path.indexOf('edit') + 1];

      setId(testimonyId);

      getContent(testimonyId);
    }

    getDataList();
  }, []);
  return (
    <Row>
      <Col span={12} offset={6}>
        <Card>
          <Space direction="vertical" style={{ width: '100%' }}>
            <CustomTitle name={section || 'Carousel'} url={DASHBOARD} />
            <Title level={5}>Pilih judul yang akan ditampilkan</Title>
            <Select
              value={title}
              placeholder="Judul"
              onChange={(value: any) => setTitle(value)}
              style={{ width: '100%' }}
            >
              {[...articleList, ...newsList, ...publicationList].map((al) => (
                <Option key={al.id} value={al.id}>
                  {al.title}
                </Option>

              ))}
            </Select>
            <Title level={5}>Deskripsi Singkat</Title>
            <TextArea
              value={content}
              onChange={(e: any) => setContent(e.target.value)}
              rows={4}
            />
            <Row justify="end">
              <Col>
                <Button type="primary" danger onClick={() => handleSubmit()}>
                  Simpan Perubahan
                </Button>
              </Col>
            </Row>
          </Space>
        </Card>
      </Col>
    </Row>
  );
};

export default EditCarousel;