Sorry, I am new in React.js, just switched from Java and I can't understand how I shall show my map on UI. Just give me a hint
import React from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
GoogleApiWrapper({
apiKey: ({api-key})
})(TestMap);
export {TestMap, GoogleApiWrapper};
here:
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
//???
);
}
}
export default Map;
It's a react component, render it as JSX
import React, { Component } from 'react';
import { TestMap } from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
An aside, don't name your class component Map as there is already a Javascript Map object and this could be the cause for some major confusion and bugs.
EDIT
Your map is forever loading as you've exported the undecorated TestMap, i.e. it isn't decorated with the google api and props.
import React, { Component } from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
// default export the decorated component so the api-key and google prop is processed and injected.
export default GoogleApiWrapper({
apiKey: 'sLiGhTlyReDacTedApIkEy'
})(TestMap);
You need to return your component as JSX markup, Introducing JSX.
Also if you are new to react is suggest starting here, Getting Started.
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
Specify the component inside the return block.In your case <TestMap /> inside the return of Map component.
Firstly I am not able to understand why are you adding one more abstraction of component over your Map component. You can directly use the TestMap component you have used in the first code snippet.
Anyway, You can directly return from the Map Component.
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
Child Component
import React from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
GoogleApiWrapper({
apiKey: ({api-key})
})(TestMap);
export default TestMap;
Parent Component
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
Related
// -----App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import News from './components/News';
import NewsItem from './components/NewsItem';
function App() {
return (
<div>
<Navbar />
<News />
</div>
);
}
export default App;
// ----- News.js
import React, { Component } from 'react'
import NewsItem from './NewsItem';
export class News extends Component {
render() {
return (
<div>
<NewsItem />
</div>
)
}
}
export default News
//----- NewsItem.js
import React, { Component } from 'react'
export class NewsItem extends Component {
render() {
return (
<div>
NewItem component
</div>
)
}
}
export default NewsItem
I am new to react and trying to learn the basics.I tried to resolve the issue but couldn't find out the actual cause. I tried to search same issue over the internet but can't find any. All though the error msg is same but situation is different.
As you can see the NewsItem.js component is passed to News.js. Is it ok to pass a class component to another class component as a return type?
I'm getting the error as shown in img.
enter image description here
Try to remove export before defining the class
class News extends Component ...
class NewsItem extends Component ...
You are already default exporting it at the bottom
I need to test a react components with props mounts ok and renders its content such as paras and divs correctly. My code can be found below or in this sandbox
I tried testing it with a default prop but that didn't work.
import React from 'react';
import test from 'tape';
import {mount} from 'enzyme';
test('testing', t => {
t.doesNotThrow(() => {
wrapper = mount(<App2 txt={ok}/>);
}, 'Should mount');
t.end();
});
And this is my component with props.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import App from './index'
export default class App2 extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
const {txt}=this.props
return (
<div>
<p>hi {txt}</p>
</div>
);
}
}
And the outer component supplying the prop.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import App2 from './app2'
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
<App2 txt={this.state.name}/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
So you would do something like providing the properties yourself and ensuring that it renders with them:
test('test your component', () => {
const wrapper = mount(<App2 txt={'michaelangelo'} />);
expect(wrapper.find('p').text()).toEqual('hi michaelangelo');
});
You shouldn't worry about testing the and html elements like that, but rather the props that you pass and that they render in the right place i.e., in the p tag
I am trying to pass a value from a context provider to a consumer using useContext and access the value outside of the render function.
My provider looks like so:
export const AppContext = React.createContext();
export class App extends React.Component(){
render(){
<AppContext.Provider value={{ name: 'John' }} ><Main /></AppContext>
}
}
My consumer looks like so
import React, { useContext } from 'react';
import { AppContext } from './App';
export class Main extends React.Component(){
componentDidMount(){
const value = useContext(AppContext);
}
render(){
return (
<div>Main Component</div>
)
}
}
The error is this:
Invalid hook call. Hooks can only be called inside of the body of a function component.
If you want to use hooks they are designed for function components. Like so:
import React, { useContext } from 'react';
import { AppContext } from './App';
const Main = () => {
const value = useContext(AppContext);
return(
<div>Main Component</div>
);
}
If you want to use it in a class based component then just set it as a static contextType in your class and then you can use it with this.context in your component like so:
import React from 'react';
import { AppContext } from './App';
class Main extends React.Component(){
static contextType = AppContext;
componentDidMount(){
const value = this.context;
}
render(){
return (
<div>Main Component</div>
)
}
}
Edit:
Remove your context from your app component and place it in its own component. I think you are receiving conflicts in your exporting of your context.
so your app component should look like:
import React from "react";
import Context from "./Context";
import Main from "./Main";
class App extends React.Component {
render() {
return (
<Context>
<Main />
</Context>
);
}
}
export default App;
Your main component should be like:
import React from "react";
import { AppContext } from "./Context";
class Main extends React.Component {
static contextType = AppContext;
render() {
return <div>{this.context.name}</div>;
}
}
export default Main;
and your context component should be like:
import React from "react";
export const AppContext = React.createContext();
class Context extends React.Component {
state = {
name: "John"
};
//Now you can place all of your logic here
//instead of cluttering your app component
//using this components state as your context value
//allows you to easily write funcitons to change
//your context just using the native setState
//you can also place functions in your context value
//to call from anywhere in your app
render() {
return (
<AppContext.Provider value={this.state}>
{this.props.children}
</AppContext.Provider>
);
}
}
export default Context;
Here is a sandbox to show you it working CodSandbox
You get the above error because Hooks are meant to be used inside functional components and not class component whereas you try to use it within componentDidMount of Main component which is a class component
You can rewrite your code for Main component using useContext hook like
import React, { useContext } from 'react';
import { AppContext } from './App';
export const Main =() =>{
const value = useContext(AppContext);
return (
<div>Main Component</div>
)
}
or use Context in a different way with class like
import React from 'react';
import { AppContext } from './App';
class Main extends React.Component {
componentDidMount(){
const value = this.context;
// use value here. Also if you want to use context elsewhere in class
// you can use if from this.context
}
render(){
return (
<div>Main Component</div>
)
}
}
Main.contextType = AppContext;
export { Main };
Hooks only work with stateless components. You are trying to use it in class component.
Here is the content for Main.js file. Uncomment the commented part if you want to use class-based component instead of the functional one.
import React from "react";
import { AppContext } from "./App";
/** UNCOMMENT TO USE REACT CLASS COMPONENT */
// class Main extends React.Component() {
// render() {
// return (
// <AppContext.Consumer>
// {value => <div>It's Main component. Context value is ${value.name}</div>}
// </AppContext.Consumer>
// );
// }
// }
const Main = () => {
const value = React.useContext(AppContext);
return <div>It's Main component. Context value is ${value.name}</div>;
};
export default Main;
Here is the content for App.js file. Uncomment the commented part if you want to use class-based component instead of the functional one.
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
export const AppContext = React.createContext();
/** UNCOMMENT TO USE REACT CLASS COMPONENT */
// export class App extends React.Component() {
// render() {
// return (
// <AppContext.Provider value={{ name: "John" }}>
// <Main />
// </AppContext.Provider>
// );
// }
// }
const App = () => (
<AppContext.Provider value={{ name: "John" }}>
<Main />
</AppContext.Provider>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
React Hooks were implemented directly for the functional components in order to give them the possibility to become stateful. Class-based components were stateful all the time, so you have to use their own state API.
Working demo is available here.
I want to pass a value to a div with id good in my index.html but it brings this error, Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead. in TestComponent (at App.js:49)
in div (at App.js:28)
in Apps (at index.js:7)
Please what am I doing wrong
TestComponent.js
import React, { Component } from 'react';
class TestComponent extends Component {
componentDidMount(){
console.log("Great");
}
render() {
// var {test} = this.props;
return (
<p>
{this.props.test}
</p>,
document.getElementById("good")
);
}
}
export default TestComponent;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TestComponent from "./components/TestComponent"
class Apps extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<TestComponent test='doyin'/>
</div>
);
}
}
export default Apps;
Index.html
<div id="good"></div>
A class Component render function shouldn't use document.getElementById, you need to use ReactDOM.render to do that
import React, { Component } from 'react';
class TestComponent extends Component {
componentDidMount(){
console.log("Great");
}
render() {
// var {test} = this.props;
return (
<p>
{this.props.test}
</p>
);
}
}
export default TestComponent;
App
class Apps extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<TestComponent test='doyin'/>
</div>
);
}
}
ReactDOM.render(<Apps />, document.getElementById("good"))
export default Apps;
In TestComponent.js, inside render function you are trying to return two elements, <p> and document.getElementById("good"). Probably you just wanted to return <p>:
render() {
return <p>{this.props.test}</p>;
}
Also, it looks like you've mistaken React.Component.render with ReactDOM.render(element, container[, callback]) where the second argument of the functions is the container.
I'm adding in Material UI to a small React app but I believe the tutorial I am going through is outdated and they are utilizing an older version of Material UI. I keep getting _materialUi2.default.Styles.ThemeManager is not a constructor in the web console as well as Missing class properties transform.
The docs for Material UI aren't so great, and I'm not sure if there's a better resource to look at their latest documentation.
I believe the problem is with ThemeManager.setPalette(). Any advice?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
// Material UI
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
class App extends React.Component {
constructor() {
super();
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
}
static childContextTypes = {
muitheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme()
}
}
render() {
return (
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
export default App;
You're right the tutorial is outdated. Import it like this:
import ThemeManager from 'material-ui/lib/styles/theme-manager';
Also: the key passed through context must be called "muiTheme"
Check out number 1 on this page of the docs: http://www.material-ui.com/#/customization/themes
Yes the tutorial is outdated.
Instead of doing this:
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
You can define your theme in a seperate folder like Theme.jsx
import Colors from 'material-ui/lib/styles/colors';
export default {
palette: {
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
}
};
Then in your main App.jsx, import Theme.jsx and set it to getMuiTheme(MyTheme)
import React, {Component} from 'react';
import MessageList from './MessageList.jsx';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import AppBar from 'material-ui/lib/app-bar';
import MyTheme from './Theme.jsx';
export default class App extends Component {
constructor(){
super();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext(){
return {
muiTheme: ThemeManager.getMuiTheme(MyTheme)
};
}
render(){
return(
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
This should solve the problem