This is my Stylesheet.js:
import React from 'react'
import "./mystyle.css "
function Stylesheet() {
return (
<div>
<h1 className="primary">Dhoni</h1>
</div>
)
}
export default Stylesheet
This is my App.js:
import './App.css';
// import Myroutes from "./Myroutes.js";
import Stylesheet from './Stylesheet';
function App() {
return (
<>
<Stylesheet primary={false} />
</>
);
}
export default App;
This is mystyle.css:
.primary {
color: orange;
}
.font-xl {
font-size: 52px;
}
I've not used Myroutes.js in this case. I'm not getting any errors in console or otherwise.
Expected Output:
No css should be applied to the text called "Dhoni". i.e a black text.
Try this and see if it works:
This is my Stylesheet.js:
import React from 'react'
import "./mystyle.css "
function Stylesheet({primary}) {
return (
<div>
<h1 className={primary}>Dhoni</h1>
</div>
)}
export default Stylesheet;
This is my App.js:
import './App.css';
// import Myroutes from "./Myroutes.js";
import Stylesheet from './Stylesheet';
function App() {
return (
<>
<Stylesheet primary={false} />
</>
)};
export default App;
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
Hi guys i want to make speech to text in React component. But when i run it I get this error:
react_speech_recognition__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
Can someone show me what to do?
import React, { Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'
class Mic extends Component {
render() {
const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props
if (!browserSupportsSpeechRecognition) {
return null
}
return (
<div>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
)
}
}
export default SpeechRecognition(Mic)
In app.js i run it like this (if this is necessary):
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Container from './components/container/Container';
import Database from './components/database/Database';
import Mic from './components/mic/Mic';
import Test from './components/test/Test';
function App() {
return (
<Mic/>
//<Test/>
);
}
export default App;
It is because of this line SpeechRecognition(Mic) . The Error states that the default export from your module is not a function which means that SpeechRecognition is not a function so you cannot call it .
change your code as
import React from 'react'
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
const Mic = () => {
const { transcript, resetTranscript } = useSpeechRecognition()
if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
return null
}
return (
<div>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
)
}
export default Mic
Looks like you have installed the latest version, but trying to use it in old way.
Please take a look at this Migration Guide
I wanna know where <ThemeProvider/> should be placed in React app.
I'd come up with two solutions about it.
1, <ThemeProvider/> should be used 'Just Once' in top-root component
like index.js or App.js file created by 'create-react-app' tool.
2, <ThemeProvicer/> should be placed in 'Each root of React-component'
literally.
for clarification, I'll show you some example.
there is just two component, 'Red' and 'Blue' <div> tag.
1, <ThemeProvider/> used 'Just Once'
// In './red.js'
import React from 'react'
import styled from "styled-components"
const Red = styled.div`background: ${props => props.theme.mainColor}`
export default function RedDiv() {
return (
//NOT using ThemeProvider
<Red />
)
}
// In './blue.js'
......
const Blue = styled.div`background: ${props => props.theme.subColor}`
export default function BlueDiv() {
return (
<Blue />
)
}
// In './App.js'
import React, { Component } from 'react'
import { ThemeProvider } from "styled-components"
import myTheme from "./myTheme
import Red from "./red"
import Blue from "./blue"
export default class App extends Component {
render() {
return (
//only used here just once
<ThemeProvider theme={myTheme}>
<>
<Red />
<Blue />
</>
</ThemeProvider>
)
}
}
2, <ThemeProvider/> used 'Each root of React-component'
// In './red.js'
import React from 'react'
import styled, { ThemeProvider } from "styled-components"
const Red = styled.div`background: ${props => props.theme.mainColor} `
export default function RedDiv() {
return (
<ThemeProvider theme={myTheme}>
<Red />
</ThemeProvider>
)
}
// In './blue.js'
......
const Blue = styled.div`background: ${props => props.theme.mainColor}`
export default function BlueDiv() {
return (
<ThemeProvider theme={myTheme}>
<Blue />
</ThemeProvider>
)
}
// In './App.js'
import React, { Component } from 'react'
import Red from "./red"
import Blue from "./blue"
export default class App extends Component {
render() {
return (
<>
// <ThemeProvider/> is not used
<Red />
<Blue />
</>
)
}
}
there is maybe some typo on the code above, but I hope that this example will convey my idea clearly.
I use it only once, inside index.js.
Also a good place to add some global styles, if you need them. I use them for resetCSS (http://meyerweb.com/eric/tools/css/reset/) and some baseCSS rules like box-sizing etc.
index.js
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import resetCSS from './styles/resetCSS';
import baseCSS from './styles/baseCSS';
import { BrowserRouter as Router} from "react-router-dom";
const GlobalStyle = createGlobalStyle`
${resetCSS}
${baseCSS}
`;
React.DOM.render(
<React.Fragment>
<GlobalStyle/>
<Router>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</Router>
</React.Fragment>
,document.getElementById('root')
);
I m following tutorials to learn the concept of Hocs in React js the result of the tutorial should display in My browser like this :
toolbar,sideDrawer,backdrop
Burger
Build Controls
but it displayed like this :
toolbar,sideDrawer,backdrop
I cleaned cache in both browser and development server but nothing happened...so please any help or guide why this??Thanks in advance
Aux.js
const Aux = (props) => props.children
export default Aux;
Layout.js
import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css'
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.childern}
</main>
</Aux>
);
export default Layout;
App.js
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout>
<BuliderBurger/>
</Layout>
</div>
);
}
}
export default App;
BurgerBuilder.js
import React,{Component} from 'react';
import Aux from '../../hoc/Aux';
class BurgerBuilder extends Component {
render () {
return (
<Aux>
<div>Burger</div>
<div>Build Controls</div>
</Aux>
);
}
}
export default BurgerBuilder;
The reason is that you misspelt children in Layout, you spellt it childern. Fix the typo and it works...
const Layout = ( props ) => (
<Aux>
<div>toolbar,sideDrawer,backdrop</div>
<main className={classes.Content}>
{props.children}
</main>
</Aux>
);
import React, { Component } from 'react';
import Layout from './components/Layout/Layout'
import BuliderBurger from './containers/BurgerBuilder/BurgerBuilder';
class App extends Component {
render () {
return (
<div>
<Layout/>
<BuliderBurger/>
</div>
);
}
}
export default App;
Using Layout this can give the desired result
I am new to ReactJS, but familiar with React Native. I am trying to to get a basic map component to be displayed.
My map component is
WaterMapView.js
import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
export class WaterMapView extends Component {
render () {
console.log(' I am here ');
return (
<Map
google={this.props.google}
style={styles.mapStyle}
initialCenter={{
lat: 40.854885,
lng: -88.081807
}}
zoom={15}
/>
)
}
}
const styles = {
mapStyle: {
height: '100%',
width: '100%'
}
}
export default GoogleApiWrapper({
apiKey: 'AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})(WaterMapView)
This component is embedded in MainDashboard.js as follows :
import React, { Component } from 'react';
import windowSize from 'react-window-size';
import WaterMapView from './WaterMapView';
class MainDashboard extends Component {
render () {
const height = this.props.windowHeight;
const {
containerStyle,
headerStyle,
navigationStyle,
mainPageStyle,
eventPageStyle,
mapPageStyle,
mapDisplayStyle,
mapPropertiesStyle
} = styles;
return (
<div style={{ ...containerStyle, height }} >
<div style={headerStyle} >
</div>
<div style={navigationStyle} >
</div>
<div style={mainPageStyle} >
<div style={eventPageStyle} >
</div>
<div style={mapPageStyle} >
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
<div style={mapPropertiesStyle} >
</div>
</div>
</div>
</div>
);
};
};
My App.js component is :
import React from 'react';
import MainDashboard from './MainDashboard';
const App = () => {
return (
<div>
<MainDashboard />
</div>
)
};
export default App
And index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I am using React version 16.0.0 and google-maps-react version 1.1.0
I get an error accompanied by a dump of code. The error is :
TypeError: Cannot read property 'array' of undefined
I am not including the dump in this post. I can add that if required.
The problem seems very basic as the I do not even see the console.log statement 'I am here' in WaterMapView.js component.
Let me know what am I missing.
<div style={mapDisplayStyle} >
WaterMapView
</div>
Should be
<div style={mapDisplayStyle} >
<WaterMapView />
</div>
Otherwise react just interprets WaterMapView as a string and displays the string. When you want to use/render the component you need to add < > to id.