I have this code that doesn't render the image.
import styled from 'styled-components';
import ImageDiv from '../../shared/Image-div';
import { sideimage, signin } from '../../../assets/images';
import device from '../../../config/device';
const LogoDiv = styled(ImageDiv)`
background-image: url(${signin});
#media ${device.mobileS} {
background-image: url(${sideimage});
}
`;
export default LogoDiv;
Rendered code:
import React from 'react';
import { sideimage } from '../../../assets/images';
import SignUpButton from './sign-up-button';
import Input from '../../shared/Input-field';
import LogoDiv from '../../shared/Image-div';
import FormDiv from '../../shared/Sign-in-div';
import { NunitoItalic18, Nunito20 } from '../../shared/nunito/nunito';
import ImageContainer from '../../shared/image-container';
import ScreenDiv from '../../shared/screen-div';
type Props = {
setDisplayScreen: Function,
};
const marginInputPercentage = '4.3%';
const marginTopPercentage = '12.3%';
const buttonMarginPercentage = '6.7%';
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<LogoDiv />
</ImageContainer>
);
export default SignIn;
This is the code base being used for the assignment.
Code for assets/images
import logo from './qiisologo/qiiso.png';
import signup from './signup/signup.png';
import signin from './signin/signin.jpg';
import sideimage from './signin/sideimage.jpg';
export { logo, signup, signin, sideimage };
Am I using a wrong syntax, because the image doesn't render? Thank you.
Related
I am getting error while facing redux-toolkit with nexjs.
The warning message is like
You are using legacy implementation. Please update your code: use
createWrapper() and wrapper.useWrappedStore()
I tried a few solutions which i found online, but still getting the same warning. Here is my code below
_app.tsx
import Head from "next/head";
import { useEffect } from "react";
import { reduxWrapper } from "../store/wrapper";
import { Provider } from "react-redux";
import "../styles/tailwind.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
const { store } = reduxWrapper.useWrappedStore(pageProps);
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
export default reduxWrapper.withRedux(MyApp);
reduxWrapper file
import {configureStore} from '#reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'
import {createWrapper} from 'next-redux-wrapper'
import rootReducer from './reducer'
import initialState from './state'
import rootSaga from './saga'
declare module 'redux' {
export interface Store {
sagaTask: any
}
}
const USE_DEV_TOOLS = process.env.NODE_ENV !== 'production'
export const makeStore = (context) => {
const sagaMiddleware = createSagaMiddleware()
const store = configureStore({
reducer: rootReducer,
preloadedState: initialState,
middleware: [sagaMiddleware],
devTools: USE_DEV_TOOLS
})
store.sagaTask = sagaMiddleware.run(rootSaga)
return store
}
export const reduxWrapper = createWrapper(makeStore)
How to make ScrollToTop component like in React Router? I would like to move page view to the top on page change.
Here's an example:
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import ScrollToTop from "./ScrollToTop"
import "./index.css";
const router = createBrowserRouter([
{
path: "/",
element: <div>Hello world!</div>,
},
]);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<ScrollToTop/>
<RouterProvider router={router} />
</React.StrictMode>
);
ScrollToTop.js
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
// "document.documentElement.scrollTo" is the magic for React Router Dom v6
document.documentElement.scrollTo({
top: 0,
left: 0,
behavior: "instant", // Optional if you want to skip the scrolling animation
});
}, [pathname]);
return null;
}
How to create the same with the use of React Location (Tanstack Router)?
We can achieve the same behaviour by using useLocation() hook in the TanStack library, but the props will be different - instead of pathname it is called current.
Here's the code for ScrollToTop.js:
import {useEffect } from "react";
import {useLocation} from "#tanstack/react-location";
export default function ScrollToTop() {
const {current} = useLocation();
useEffect(() => {
document.documentElement.scrollTo({
top: 0,
left: 0,
behavior: "instant", // Optional if you want to skip the scrolling animation
});
}, [current]);
return null;
}
I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's rendering using Times. I'm not sure why.
Here's my index.tsx:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "#material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "#material-ui/styles";
const theme = createMuiTheme({
typography: {
fontFamily: ["Arial"].join(",")
}
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={configureStore()}>
<App />
</Provider>
</ThemeProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
My app component:
import React from "react";
import { useSelector } from "react-redux";
import HeaderContainer from "../containers/layout/header/HeaderContainer";
import { ThemeProvider, useTheme } from "#material-ui/styles";
import theme from "../styling/mainTheme";
import { createMuiTheme } from "#material-ui/core";
const App: React.FC = () => {
const theme = useTheme();
return (
<div className="App">
<HeaderContainer />
</div>
);
};
export default App;
The header container (will contain logic):
import * as React from 'react';
import Header from '../../../components/layout/header/Header';
export interface HeaderContainerProps {
}
export default class HeaderContainer extends React.Component<HeaderContainerProps> {
public render() {
return <Header />
}
}
And finally the header:
import * as React from "react";
import { styled } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
export default function Header() {
return (
<AppBar>
<h2>Hello</h2>
</AppBar>
)
}
I've tried putting the ThemeProvider in different components, but my h2 is still rendering as Times. Would be great if someone could spot the issue. Thanks
Checking the documents of material-ui it turns out you have imported some of the things from library in a wrong way. Like the docs state -
import { useTheme } from '#material-ui/core/styles';
import { createMuiTheme } from '#material-ui/core/styles';
Which can basically be
import { useTheme, createMuiTheme } from '#material-ui/core/styles';
Same goes for ThemeProvider
import { ThemeProvider } from '#material-ui/core/styles';
In MUI V5 you need to import ThemeProvider and createTheme from #mui/material/styles instead of #mui/styles.
import * as React from 'react';
import ReactDOM from 'react-dom';
import {red} from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
function App() {
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
ReactDOM.render(<App />, document.querySelector('#app'));
source
I'm new to redux here I'm displaying post I'm not understanding whats is going on I read few posts but can't resolve the error
But then I get the error as
Error: Actions must be plain objects. Use custom middleware for async actions.
Following is action reducer and store code please lemme know where I'm going wrong
actionPost.js
import {FETCH_POST} from '../constants/action-types';
import Axios from 'axios';
export const fetchPost=(post)=>{
return{
type:FETCH_POST,
payload:post
}
}
export const fetchAllPost=()=>{
return (dispatch)=>{
return Axios.get("https://jsonplaceholder.typicode.com/photos")
.then(response=>{
dispatch(fetchPost(response.data))
})
.catch(error=>{
throw(error)
});
};
}
Post.js
import React, { Component } from 'react';
import { fetchAllPost } from './Redux/actions/actionPost';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
const mapDispatchToProps=dispatch=>{
return{
fetchAllPost:()=>dispatch(fetchAllPost())
}
}
class NewPostC extends Component{
componentDidMount(){
this.props.fetchAllPost(); **// is this correct?**
}
render(){
return(
<div>
//display post here
</div>
)
}
}
const dispPost=connect(null,mapDispatchToProps)(NewPostC);
export default withRouter(dispPost);
Reducers.js
import { LOG_IN,FETCH_POST } from '../constants/action-types';
const initialState={
userDetails:''
};
const rootReducers=(state=initialState,action)=>{
switch(action.type){
case LOG_IN:
console.log("apayload",action.payload)
return state;
case FETCH_POST:
return action.posts;
default:
return state;
}
};
export default rootReducers;
store.js
import { createStore } from "redux";
import rootReducers from "../reducers/Loginreducers";
const store=createStore(rootReducers);
export default store;
Can anyone please help me as I'm stuck since 2 days I wanna understand whats happening and where I'm going.
Please lemme know where I'm going wrong.
Updated code only the changes I made in those files
dispPost.js
const mapDispatchToProps=()=>{
return{
fetchAllPost ////////////**A**
}
}
const mapStateToProps=state=>{
console.log("state",state)
return{
posts:state
}
}
//code here
const NewPost=connect(mapStateToProps,mapDispatchToProps)(NewPostC);
reducers
case FETCH_POST:
console.log("apayload---",action.posts)
return action.posts;
store.js
]
When I added the thunk and applymiddleware the error vanished
import rootReducers from "../reducers/Loginreducers";
import { fetchAllPost } from "../actions/actionNewPost";
import { createStore , applyMiddleware } from "redux";
import thunk from "redux-thunk";
const store=createStore(rootReducers,applyMiddleware(thunk)); **B**//
store.dispatch(fetchAllPost()); //**C**
export default store;
Can anyone please explain how A ,B, C work Its seems to me some magic Please lemme know
New Updated
store.js
import rootReducers from "../reducers/Loginreducers";
import { createStore , applyMiddleware } from "redux";
import thunk from "redux-thunk";
const store=createStore(rootReducers,applyMiddleware(thunk));
export default store;
disppost.js
const mapDispatchToProps=dispatch=>{
return{
//just fetchAllPost doesnt work if its not dispatch at store or here
fetchAllPost:()=>dispatch(fetchAllPost())
}
}
Post.js
import React, { Component } from 'react';
import { fetchAllPost } from './Redux/actions/actionPost';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
const mapDispatchToProps=dispatch=>{
return{
fetchAllPost // **remove the function declaration, you already did it **
}
}
class NewPostC extends Component{
componentDidMount(){
this.props.fetchAllPost();
}
render(){
return(
<div>
//display post here
</div>
)
}
}
const dispPost=connect(null,mapDispatchToProps)(NewPostC);
export default withRouter(dispPost);
I would say that would be a good idea to check your store.js, I'm assuming you're using redux thunk. Below some links related to your issue:
https://github.com/reduxjs/redux-thunk/issues/166
https://github.com/reduxjs/redux-thunk/issues/146
I hope it helps
It's my error:
And it's my component:
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import {App} from './App';
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
It's my store i export and import it to App.js
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
form: reduxFormReducer, // mounted under "form"
});
const store = (window.devToolsExtension
? window.devToolsExtension()(createStore)
: createStore)(reducer);
export default store;
Where should i add store with Provider to works well?
I change structure of store and now it's working:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const loggerMiddleware = createLogger();
export const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
));
As you are exporting store as default you have to import it without courly braces as follow:
import store from './_helpers';
Hope it helps.