Send array as property to component in Typescript-CodePudding

This should be easy, but I am struggling with type managing trying to send a list as property to a component. Specifically, I am creating the following component:

const [list, setList] = useState<Array<ToastProps>>([]);
...
<Toast toastlist={list}></Toast>

This component is set as:

export interface ToastProps {
  id: number;
  title: string;
  description: string;
  backgroundColor: string;
}

export default function Toast(props: ToastProps[]) {
  return (
    <div>
      {props.map((toast, i) => (
        <div key={i} style={{ backgroundColor: toast.backgroundColor }}>
          <button>X</button>
          <div>
            <p>{toast.title}</p>
            <p>{toast.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

I have the following error:

Type '{ toastlist: ToastProps[]; }' is not assignable to type 'IntrinsicAttributes & ToastProps[]'.

How can I fix this problem? Thanks in advance for any help you can provide.

CodePudding user response：

the component prop should be like this.

export default function Toast({toastlist}: {toastlist:ToastProps[]}) {
 return (
    <div>
      {toastlist.map((toast, i) => (
        <div key={i} style={{ backgroundColor: toast.backgroundColor }}>
          <button>X</button>
          <div>
            <p>{toast.title}</p>
            <p>{toast.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

CodePudding user response：

Edit interfaces

export interface ToastList {
  id: number;
  title: string;
  description: string;
  backgroundColor: string;
}

export interface ToastProps {
  toastlist: ToastList[];
}

/////
const [list, setList] = useState<ToastList[]>([]);
...
<Toast toastlist={list}></Toast>
/////


export default function Toast(props: ToastProps) {
  return (
    <div>
      {props.map((toast, i) => (
        <div key={i} style={{ backgroundColor: toast.backgroundColor }}>
          <button>X</button>
          <div>
            <p>{toast.title}</p>
            <p>{toast.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}