Send array as property to component in Typescript

Question

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.

Sachila Ranawaka · Accepted Answer · 2022-11-17 10:13:26Z

2

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>
  );
}

answered Nov 17, 2022 at 10:13

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Popov · Accepted Answer · 2022-11-17 10:25:32Z

1

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>
  );
}

answered Nov 17, 2022 at 10:25

Ivan Popov

7063 silver badges11 bronze badges

Collectives™ on Stack Overflow

Send array as property to component in Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related