Property 'username' does not exist on type 'string'-CodePudding

Here is the updated mostly full version of the code. Not sure why its saying that is cant find the username or profileImage. The full error is Property 'username' does not exist on type 'string' Any help would be greatly appreciated. Thank you.

import React, { FC, useEffect, useState } from "react";
import { DirectMessages } from "../DirectMessages";
import data from "../../Data/directmessages.json"

interface Props {
  directmessage: DirectMessage;

}

export interface DirectMessage {
    username: string;
    profileImage: string;
    message: Array<string>;
    seen: boolean;
    muted: boolean;
}

export const DirectMessage: FC<Props> = ({directmessage}) => {

    const [view, setView] = useState<boolean>(false);
    const [create, setCreate] = useState<boolean>(false)

  return  ( 
    <>
    <div className={`directmessage ${directmessage.muted ? 'muted' : ''} ${directmessage.seen ? 'seen' : ''}`}>
       
        <button type="button" className="profile-image" onClick={() => setView(true)}>
            <img src={directmessage.profileImage} alt={directmessage.username} />
        </button>

        <span className="directmessage-username">{directmessage.username}</span>
    </div> 
    <Modal fullScreen active={view} setActive={setView}>
        <div className="directmessage-message">
            {directmessage.message.map(directmessage => 
            <div className="directmessage">
                 <img src={directmessage} alt={directmessage} />

                 <div className="direct-message-content">
                    <strong>{directmessage.username}</strong>
                 </div>
            </div>
        )} 
        </div>

    </Modal>

    </>
  )```

CodePudding user response：

You shadowed the existing directmessage - to fix this you just need to rename the parameter name of the callback:

<div className="directmessage-message">
  {directmessage.message.map((msg) => (
    <div className="directmessage">
      <img src={msg} alt={msg} />
      <div className="direct-message-content">
        <strong>{directmessage.username}</strong>
      </div>
    </div>
  ))}
</div>;

CodePudding user response：

Are you using instead of and please check that you username which you are getting from File is getting properly in String.