Restapi laravel, and fetch from react

import React, { useState, useEffect }  from 'react';

function ContactsList(props) {

    const [contactList, setcontactList] = useState([]);
    const url = 'http://todorestapi.test'

    const init = async () => {
        const response = await fetch(url + '/api/contact/all');
        const json = await response.json()
        setcontactList(json)
        // console.log(typeof(json.data))
        // json.data.forEach(el => {
        //     console.log(el);
        //   });
        console.log('init useEffect')
    }



    
    useEffect(() => {
        init() 
    }, [])

    return (
        <div>

        {
            // JSON.stringify(contactList.data)
            // contactList.data.map((contact, i) => (
            // <h1>{contact.email}</h1>
            // ))
                console.log('return div')
                
            
        }
                    
        {/* <table className="table table-dark">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Contact</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            contactList.data.forEach(contact => (
                                <tr>
                                <th scope="row">2</th>
                                <td>{contact.user_name}</td>
                                <td>{contact.email}</td>
                                <td>{contact.contact_number}</td>
                        
                                </tr>
                            ))
                        }
                    
                       
                    </tbody>
                </table> */}

        </div>
    );
}

export default ContactsList;

import React, { useState, useEffect } from 'react';

function ContactsList(props) {
  const [contactList, setContactList] = useState(null);
  const url = 'http://todorestapi.test';

  const init = async () => {
    const response = await fetch(url + '/api/contact/all');
    const json = await response.json();
    setContactList(json.data);
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <div>
      <table className="table table-dark">
        <thead>
          <tr>
            <th scope="col"> # </th>
            <th scope="col"> Name </th>
            <th scope="col"> Email </th>
            <th scope="col"> Contact </th>
          </tr>
        </thead>
        <tbody>
          {contactList &&
            contactList.map(contact => (
              <tr>
                <th scope="row"> 2 </th>
                <td> {contact.user_name}</td>
                <td> {contact.email}</td>
                <td> {contact.contact_number}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

export default ContactsList;