Develop Reference

Returning Code from a TypeScript Module in React

I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
This is fine.
But, in the ./Guide/Guide.tsx, I have:
import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}
Menu.tsx:
import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};
However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..
What's going on here?
You can probably tell I'm very new to React and TypeScript!

In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.
In order to fix this, simply replace your return function in the Menu and Guide components by the render function

How to route to or navigate to a route programmatically in nextjs class component?

I am building a simple app using nextjs. most of my components are functional components. However, I have a class component to handle form.
I want to redirect to the home page after the form is submitted. console.log(this.router) gives undefined. Since it is a class component I can't use useRouter() hook. How do I get reference to router in class components in next.js?

Finally I got the answer,
import Router from 'next/router'
and use Router.push(...)
With Next 13 onwards, import router from next/navigation

As an alternative to using the next/router default export directly, withRouter HOC can also add the router object to any component.
import * as React from 'react'
import { withRouter } from 'next/router'
class Page extends React.Component {
render() {
const { router } = this.props
return <p>{router.pathname}</p>
}
}
export default withRouter(Page)

How to route class component by clicking button in React?

I am new to React. I am trying to build a page and having like 3 button or img on main page. When I click either one, I shall be routed to another class component. You can treat it like click the icon and route you to another category page (just an example). Below is my structure and partial code I tried. I have no idea how to achieve that, and I googled and seems cannot find the stuff I want.
Structure:
/src
.index.js
.App.js
.BookStore.js
.FruitStore.js
.FoodStore.js
index.js
import React from "react";
import { render } from "react-dom";
import App from "./App";
render(
<App />,
document.getElementById('root')
);
App.js:
import React from "react";
import BookStore from "./BookStore";
const AppContainer = () => {
return (
//do the routing
<BookStore/>
)
};
export default AppContainer;
BookStore.js
export default class BookStore extends React.Component {
}
const contentDiv = document.getElementById("root");
const gridProps = window.gridProps || {};
ReactDOM.render(React.createElement(BookStore , gridProps), contentDiv);

First, you could have a look at the/one react router, e.g. https://reactrouter.com/web/guides/quick-start
However, since you're writing you're new to react, this might be a little too much ...
First, I was wondering why you're using the "ReactDOM" in your indexjs (that seems to be correct), but also in the BookStore.js. I would also recommend to write your components as functions, like your "AppContainer" and not use the class components anymore (or do you really need to do that? - why?). You can use hooks instead to have e.g. state in the components.
You would then need any kind of state in your AppContainer which is used for the routing. Maybe like this:
const AppContainer = () => {
const [showDetail, setShowDetail] = useState();
return <>
{!showDetail && <BookStore onDetail={detail => setShowDetail(detail)} />}
{showDetail && <DetailPage detail={showDetail} onBack={() => setShowDetail(undefined)}}
</>
}
Your AppContainer then has a state wheter or not to show the Bookstore (which is shown when "showDetail" is falsy, or a DetailPage which is shown when showDetail is truthy.
For this to work, your Bookstore needs to provide callbacks to let the AppContainer know that something should change. Very simply it could look like this:
const BookStore = ({onDetail}) => {
return <button onClick={() => onDetail("anything")}>Click me</button>
}
Now when someone clicks the button on the bookstore, it calls the "onDetail" callback, which was set in the AppContainer to set the "showDetail" state. So this one will be updated to "anything" in this case. This will result in a rerender on the AppContainer which will now render a DetailPage component instead.

React Native store screen in object and import that object

I'm starting to learn React Native and faced a problem I'm not able to solve.
In the file Screens.js, I want to store all screens in an object and export said object.
// Screens.js example
import { HelloScreen } from './HelloScreen';
export const screens = {
hello: HelloScreen,
};
Then, I want to import the 'screens' object into App.js an use the 'HelloScreen' there
import { screens } from './screens/Screens';
export default createStackNavigator({
Home: {
screen: screens.hello
},
});
But'screens' is undefined here.
What am I doing wrong?
I'm also getting this error message:
The component for route 'Home' must be a React component.
Thanks in advance for your help.

I figured it out. I had to change the way I import 'HelloScreen' in 'Screens.js' from this:
import { HelloScreen } from './HelloScreen';
to this:
import HelloScreen from './HelloScreen';

React-navigation: "You should only render one navigator" - but I have only one

I just upgraded react-navigation to v2.0-rc9, and it complains that
You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.
I have only one navigator, as shown below, and I can't understand where that comes from. Could you please point to a possible cause for that error ? Below are my root component and the way I create the navigator.
Root.js:
import React, { PureComponent } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import AppNavigation from './AppNavigation';
class Root extends PureComponent {
render() {
return (
<Provider store={store}>
<AppNavigation/>
</Provider>
);
}
}
export default Root;
AppNavigation.js:
import { createStackNavigator } from 'react-navigation';
const AppNavigation = createStackNavigator({
home: HomePage
});
export default AppNavigation;

Try updating the react-navigation to 2.0.2 as according to this issue it is a bug with react-native and not react-navigation. The author seems to have added a patch in version 2.0.2.
Check if it works for you and post any further error on the issue there.
Thanks.