Error, when passing correct type to function in React/Typescript

Question

I have problem, when i passing string variable to function.

I created interface MyMessageProps, which declare message on string,

later function MyMessage use this interface and return with this message.

When i adding React Component and trying add this function to button onClick error appear.

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;

Shouldn't it be const variable = {message: 'test'} instead? That's what the error message implies, anyway. — jcalz
– jcalz, Commented Apr 30, 2019 at 19:06

German · Accepted Answer · 2019-04-30 19:09:39Z

2

Your function is expecting an object like:

const mssg = {
  message: 'MyMessage'
}

Try this:

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;

answered Apr 30, 2019 at 19:09

German

5573 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

Error, when passing correct type to function in React/Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related