fix.js

import React, { useState, useEffect } from 'react';
import { Link, useHistory, useLocation } from "react-router-dom";
import axios from '../../services/axios';
import { message as alert } from 'antd';
import Header from '../header/header.component';
import './update-resources.css';
import Spinner from '../spinner/spinner.component';

export default function updateResource(props) {
  const [loading, setLoading] = useState(false);
  const [category, setCategory] = useState("");
  const [service, setService] = useState("");
  const [title, setTitle] = useState("");
  const [text, setText] = useState("");
  const [resource, setResource] = useState([]);

  const location = useLocation();

  useEffect(() => {

    console.log(location);

  }, [location]);

  const fetchResource = async () => {
    setLoading(true);
    const res = await axios.get(`/resource/${props.match.params.id}`);
    setLoading(false);
    setResource(res.data.data)
  };

  useEffect(() => {
    fetchResource();
  }, []);
  console.log(resource);

  const handleSubmit = async (event) => {
    try {
      event.preventDefault();
      setLoading(true);
      const updateResource = await axios.patch(`/resource/${props.match.params.id}`,
        { title: title, category: category, service: service, text: text })
      const { status, message } = updateResource.data
      if (status === "200")
        alert.success(message)
      props.history.push('/profile');
    } catch (error) {
      console.log(error)
      setLoading(false);
      if (error.response.status === 500) alert.error(error.response.data.message)
    }
  }


  return (
    <>
      <div>
        {resource.map((item, i) => (
         // added fixes here, by properly returning a component
          <ul key={i}>
            <li>
              <input
                value={item.title}
                id="title"
                onChange={e => setTitle({ title: e.target.value })}
              />
            </li>
          </ul>
        ))}
      </div>
      <Header />
      <br />
      <h2 align="center"> Edit your resource... </h2>
      <div align="center" className="update-resource-div">
        {loading && <Spinner />}
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={props.title}
            placeholder="Edit your title.."
            onChange={e => setTitle(e.target.value)}
            required
          />
          <select
            type="text"
            value={category}
            onChange={e => setCategory(e.target.value)}
            required>
            <option> Choose a category.. </option>
            <option value='Songs'>Songs</option>
            <option value='Relevant information'>Relevant Information</option>
            <option value='Message'>Message</option>
            <option value='Video Announcement'>Video Announcement</option>
            <option value='Other'>Other</option>
          </select>
          <br />
          <select value={service} onChange={e => setService(e.target.value)} required>
            <option> Choose a service.. </option>
            <option value='Life Application Service'>Life Application Service</option>
            <option value='Jesus Celebration Service'>Jesus Celebration Service</option>
            <option value='Youth Church'>Youth Church</option>
            <option value='Teenage Church'>Teenage Church</option>
            <option value="Children's Church">Children's Church</option>
          </select>
          <textarea
            id="text"
            value={props.text}
            placeholder="Edit your text.."
            onChange={e => setText({ text: e.target.value })}
            required
          />
          <br />
          <input type="submit" value="update" className="button" /><br />
        </form>
      </div>
    </>
  );
}