Ошибка при передаче правильного типа в функцию в React / Typescript

Question

У меня проблема, когда я передаю строковую переменную в функцию.

Я создал интерфейс MyMessageProps, который объявляет сообщение в строке,

Позже функция MyMessage использует этот интерфейс и возвращается с этим сообщением.

Когда я добавляю React Component и пытаюсь добавить эту функцию к кнопке onClick, появляется ошибка.

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {message}</div>;
}

class App extends Component {

  render() {

    const variable = 'test';

    return (
      <div>
            <button onClick = {() => MyMessage(variable)}></button>
      </div>
    );
  }
}

export default App;

Answer 1

Ваша функция ожидает объект типа:

const mssg = {
  message: 'MyMessage'
}

Попробуйте это:

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {message}</div>;
}

class App extends Component {

  render() {

    const variable = {
        message: 'my test'
     };

    return (
      <div>
            <button onClick = {() => MyMessage(variable)}></button>
      </div>
    );
  }
}

export default App;