React, observer stateless component with typescript

user_6157526 0
Viewed 1237

Im having some problems using React with TypeScript and now Im stuck with making a stateless component an observer. Im using MobX btw.

StatelessComponent: 

const TaskItem: React.SFC<{task: Task, deleteTask: (e:any) => void}> = (props) => (
        <li onClick={ props.deleteTask }>{ props.task.name }</li>
);

Code below gives type missmatch assigning ClassicComponent to StatelessComponent and im getting nowhere solving it.

Error: [ts] Type 'ClassicComponentClass<{ task: Task; deleteTask: (e: any) => void; }>' is not assignable to type 'StatelessComponent<{ task: Task; deleteTask: (e: any) => void; }>'.

const TaskItem: React.SFC<{task: Task, deleteTask: (e:any) => void}> = observer((props) => (
        <li onClick={ props.deleteTask }>{ props.task.name }</li>
));

How do I make a stateless component an observer? And is there a "prettier" way to write this?

observable mobx reactjs javascript
1 Answers

Looks like this works:

const App = observer((props: {test: string}) => 
    <div>{props.test}</div>
);

ReactDOM.render(<App test="sdsdfsddddddddddddddddddf" />
    ,document.getElementById('root'));

user_61575260
Related