Cannot read property 'substr' of undefined in React JS inside map function

It seems like it is trying run the substring method on an undefined property? This could imply that biogarphy could be undefined.

Given that the initial state of data is ['a', 'b', 'c'], it is certain that biography is undefined while waiting for the response from fetchData() in the useEffect() hook.

In that case, you might want to do a null/undefined check and conditionally run the statement with the substr() method only if item.biography has been populated with the response from the useEffect hook

{item.biography && item.biography.substr(0, 20)}

if string can be null you'll get the error

change this line

<p> {item.biography.substr(0, 20)}  </p>

to

 {!!item.biography && (<p>{item.biography.substr(0, 20)}</p>)}  

You need to add a check for biography is not undefined while using substr on it.

Also i suggest you to use .substring() as .substr is deprecated.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import $ from 'jquery';
//import "./styles.css";

function Instructor() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState(['a', 'b', 'c']);
  const [isLoading, setIsLoading] = useState(true);


  const loadMoreData = () => {
    setPage(page + 1);
  };
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'http://www.localhost/ulearn/api/getInstructors',
      );
      setData(result.data);
    };
    fetchData();
  }, []);
  return (
    <div>
      <h1> API FOR INSTRUCTOR COMPONENT </h1>
      {isLoading && <p>Wait I'm Loading comments for you</p>}

      {data.length !== 0 && (
        <button onClick={loadMoreData}>Load More Data</button>
      )}
      {data.map((item, index) => (

        <div className="col-xl-3 col-lg-4 col-md-6 col-sm-6" key={index}>
          <div className="instructor-box mx-auto text-center">
            <a href="{{ route(d.view, d.instructor_slug) }}">
              <main>
                <div className="col-md-12">
                  <h6 className="instructor-title">{item.first_name} 
                    {item.last_name}
                  `enter code here`</h6>
       <p> {item.biography && item.biography.substring(0, 20)}  </p> 

                </div>
              </main>
            </a>
          </div>
        </div>
      ))}
    </div>
  );
}

if (document.getElementById('instructor')) {
  ReactDOM.render(<Instructor />, document.getElementById('instructor'));
}

It is very possible that the content of biography is undefined, so you can add a check by conditionally rendering it to make sure it only displays the biography if biography contains a value or exists.

You can change

<p> {item.biography.substr(0, 20)} </p>

to

{item.biography && <p> {item.biography.substr(0, 20)} </p>}