El siguiente código lo tengo escrito con React, pero quiero convertirlo a React Hooks y Typescript, pero no consigo hacerlo, no se qué hago mal ni que me falta por hacer. El funcionamiento del código es básicamente que al pulsar un botón se muestre un determinado contenido, y al pulsar el otro se muestre otro distinto. El código es el siguiente:
const ViewOne = ({onClick}) => (
<div>
View 1 <br />
<button onClick={() => onClick("view2")}>Go to view 2</button>
</div>
);
const ViewTwo = ({onClick}) => (
<div>
View 2 <br />
<button onClick={() => onClick("view1")}>Go to view 1</button>
</div>
);
const App = () => {
const [currentView, setCurrentView] = React.useState("view1");
return (
<div>
{
currentView === "view1" ?
<ViewOne onClick={page => setCurrentView(page)} /> :
<ViewTwo onClick={page => setCurrentView(page)} />
}
</div>
);
};
const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);
Actualmente lo tengo así, he modificado ViewOne pero obtengo error en "<button onClick={() => onClick("view1")}>Go to view 1"
interface ViewOneProps {
onClick: string;
}
const ViewOne: React.FC<ViewOneProps> = props => {
return (
<div>
View 1 <br />
<button onClick={() => onClick("view2")}>Go to view 2</button>
</div>
);
}
const ViewTwo = ({ onClick }) => (
<div>
View 2 <br />
<button onClick={() => onClick("view1")}>Go to view 1</button>
</div>
);
const App = () => {
const [currentView, setCurrentView] = React.useState("view1");
return (
<div>
{
currentView === "view1" ?
<ViewOne onClick={page => setCurrentView(page)} /> :
<ViewTwo onClick={page => setCurrentView(page)} />
}
</div>
);
};
// ========================================
ReactDOM.render(<Homepage />, document.getElementById("root"));
¿Cuál sería la forma correcta de pasar el código a Hooks y Typescript?