I'm trying to create a simple component, styled with React-JSS:
import React from 'react';
import { createUseStyles, useTheme } from 'react-jss';
import { useSessionState, useSessionDispatch } from '../../../contexts/SessionContext';
const useStyles = createUseStyles({
messageSuccess: {
backgroundColor: 'green'
}
});
const SystemMessage = () => {
const dispatch = useSessionDispatch();
const theme = useTheme();
const classes = useStyles({theme});
return (
<div className={classes.messageSuccess}>
abcd
</div>
);
}
export default SystemMessage;
Upon running it, I get this message:
TypeError: Object(...) is not a function
const useStyles = createUseStyles({
What am I doing wrong?
You should update your react-css version to 10.0.0
Related
I want to scale only one element in the map when clicking on the picture. I read that I have to use an index but I don't know how to do it. I also saw how to do it in inline "onclick" by passing index there. But I want to do it with separated function.
Here is the code :
import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { birds, mountains,trees, search } from './features/slices/photoSlice';
function App() {
const url = useSelector((state)=>state.url)
const dispatch = useDispatch()
const [photos, setPhoto] = useState('')
const [scale, setScale] = useState(false)
const [photoindex, setPhotoindex] = useState(0)
useEffect(()=>{
fetch(url).then(res=>res.json()).then(data=>setPhoto(data))
},[url])
const handleSearch = (e) =>{
if(e.key==='Enter'){
e.preventDefault()
dispatch(search(e.target.value))
}
}
const handleClickOnPicture = (e) => {
if(e){
setScale(!scale)
}
}
return (
<div className="App">
// Problem is here below:
{photos?photos.hits.map((photo, index)=>{
return <img className={scale?'m-5 h-80 scale-125':'m-5 h-80'} onClick={handleClickOnPicture} key={photo.webformatURL} src={photo.webformatURL}/>
}):""}
</div>
</div>
</div>
);
}
export default App;
I removed half of the code, so you will see only the problem.
use event.target.classname to add/remove classes
const handleClickOnPicture = (e) => {
if(!e.target.classList.contains('scale-125')){
e.target.classList.add('scale-125')
}
else{
e.target.classList.remove('scale-125')
}
}
<img className='m-5 h-80' onClick={handleClickOnPicture} key={photo.webformatURL} src={photo.webformatURL}/>
hello i am integrating CKEditor into a react project (create next-app) when i first use functional component, in the code below, it works as expected
import React, { useState, useEffect, useRef } from 'react'
export default function MyEditor (props) {
const editorRef = useRef()
const [editorLoaded, setEditorLoaded] = useState(false)
const { CKEditor, ClassicEditor } = editorRef.current || {}
useEffect(() => {
editorRef.current = {
CKEditor: require('#ckeditor/ckeditor5-react').CKEditor,
ClassicEditor: require('ckeditor5-custom-build/build/ckeditor'),
}
setEditorLoaded(true)
}, [])
const editorConfiguration = {
....
};
return editorLoaded ? (
<CKEditor
editor={ClassicEditor}
...
/>
) : (
<div>Editor loading</div>
)
}
but when i try to translate this same code into a react class component, it fails
import React, { Component } from "react";
export default class Editor extends Component {
constructor(props) {
super(props);
this.state = {
myText: this.props.data,
EditorLoading: true,
};
this.editorConfiguration = {
...
this.editorRef = React.createRef();
}
SO is not allowing me to paste all the code *****
Using Next.js, I can get the context value in header.js file without a problem but it returns undefined in _app.js
Here is my code.
useLang.js
import { createContext, useContext, useState } from 'react'
const LangContext = createContext()
export const LangProvider = ({ children }) => {
const [lang, setLang] = useState('en')
const switchLang = (selected) => setLang(selected)
return (
<LangContext.Provider value={{ lang, switchLang }}>
{children}
</LangContext.Provider>
)
}
export const useLang = () => useContext(LangContext)
_app.js
import { LangProvider, useLang } from '../hooks/useLang'
export default function MyApp(props) {
const { Component, pageProps } = props
const contexts = useLang()
console.log(contexts) // ------> undefined. why ???
return (
<LangProvider>
<Component {...pageProps} />
</LangProvider>
)
}
header.js
import { useLang } from '../hooks/useLang'
export default function Header() {
const { lang } = useLang() // ------> works fine here!
return <> {lang} </>
}
I've looked at the Next.js documentation, but nowhere does it mention that you cannot use the state or context in _app.js. Any help would be appreciated.
Yes, you can not get the value of context on _app.js because on top _app.js mustn't children of LangProvider. You just only can use context's value on children component of LangProvider container.
My code is like this:
import React, { useEffect } from 'react';
import alanBtn from '#alan-ai/alan-sdk-web';
const alanKey = my key;
const App = () => {
useEffect(() => {
alanBtn({
key: alanKey,
onCommand: ({ command }) => {
alert('This code was executed');
}
})
}, []);
return (
<div><h1>Alan AI News Application</h1></div>);
}
export default App;
But i am getting the error as:
Reference Error:Navigator not defined..
How to fix it?
Browser objects like window , navigator etc should be define in useEffect first before use.
const [pageURL, setPageURL] = useState("");
const [isNativeShare, setNativeShare] = useState(false);
useEffect(() => {
setPageURL(window.location.href);
if (navigator.share) {
setNativeShare(true);
}
}, []);
// Now, use can use pageURL , isNativeShare in code
This is not an issue with your Next.js code it's just the way you are supposed to call the alan-ai library.
Below is the solution that should work for you.
import React, { useEffect } from "react";
const alanKey = "my key";
function App() {
useEffect(() => {
const alanBtn = require("#alan-ai/alan-sdk-web");
alanBtn({
key: "myKey",
rootEl: document.getElementById("alan-btn")
});
}, []);
return (
<div>
<h1>Alan AI News Application</h1>
</div>
);
}
export default App;
Here is the discussion link for the same https://github.com/alan-ai/alan-sdk-web/issues/29#issuecomment-672242925.
Hope this solves your issue.
Happy Coding.
I have a React Native app and am using React Navigation. I am now trying to add screen tracking analytics with firebase.
I am following this documentation, which has this sample code:
import analytics from '#react-native-firebase/analytics';
import { NavigationContainer } from '#react-navigation/native';
<NavigationContainer
ref={navigationRef}
onStateChange={state => {
const previousRouteName = routeNameRef.current;
const currentRouteName = getActiveRouteName(state);
if (previousRouteName !== currentRouteName) {
analytics().setCurrentScreen(currentRouteName, currentRouteName);
}
In my code, however, I am creating my base NavigationContainer with a function like so:
export default createStackNavigator(
{
Home: MainTabNavigator,
SignIn: SignInNavigator,
},
{
transitionConfig: dynamicModalTransition,
headerMode: 'none',
initialRouteName: 'Home',
},
);
What is the best way to integrate the code from the example?
The problem is because you are on react-navigation v4.x.x, but the example you have is for v5.x.x.
In v4, event listeners can be added on AppContainer.
The example below is for v4.
import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
function getActiveRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
if (route.routes) {
return getActiveRouteName(route);
}
return route.routeName;
}
const nav = createStackNavigator({...});
const AppContainer = createAppContainer(nav);
export default () => {
return <AppContainer
onNavigationStateChange={(prevState, currentState, action) => {
const currentRouteName = getActiveRouteName(currentState);
const previousRouteName = getActiveRouteName(prevState);
if (previousRouteName !== currentRouteName) {
analytics().setCurrentScreen(currentRouteName, currentRouteName);
}
}}
/>
}
I'm using NavigationContainer and createStackNavigator, too and this is how I did it, like in the example for screen tracking at reactnavigation.org
import * as Analytics from 'expo-firebase-analytics';
import { useRef } from 'react';
import { NavigationContainer } from '#react-navigation/native';
export default () => {
const navigationRef = useRef();
const routeNameRef = useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() =>
(routeNameRef.current = navigationRef.current.getCurrentRoute().name)
}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
// The line below uses the expo-firebase-analytics tracker
// https://docs.expo.io/versions/latest/sdk/firebase-analytics/
// Change this line to use another Mobile analytics SDK
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName
});
}
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}}
>
{/* ... */}
</NavigationContainer>
);
};