Magic? Where does the React Context Provider come from? Naming convention? - javascript

I am using firebase auth in my app and it's working - however I'm struggling to understand how the provider passes data into the App component in App.js.
It doesn't appear to be passed in explicitly. Is there a naming convention or something that's passing the data?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import firebase from './firebase'
import withFirebaseAuth from 'react-with-firebase-auth'
import SignInPage from './SignInPage'
import AppContainer from './AppContainer'
const firebaseAppAuth = firebase.auth();
function App(provider){
return (
<div className="App">
{
provider.user // if user from the provider
? <AppContainer
authUser={provider.user}
signOut={provider.signOut}
/>
: <SignInPage
signInWithGoogle={provider.signInWithGoogle}
error={provider.error}
/>
}
</div>
);
}
const providers = {
googleProvider: new firebase.auth.GoogleAuthProvider()
};
export default withFirebaseAuth({
providers,
firebaseAppAuth,
})(App);

You're getting the provider from the HOC withFirebaseAuth. It wraps your component. That's why you can use the provider even though you didn't pass it, the HOC 'provided' it.

Related

my contextapi is refusing to work and give me a blank page when i am using it

I have been training myself lately on using react context API. now I tried it on a personal project but apparently, my context API doesn't work.
Context.js
import { createContext,useState } from "react";
import React from "react";
export const Mycontext = createContext([]);
export function Context({children}) {
//put all states here
const [type,setType] = useState(0)
const [color,setColor] = useState('white')
return (
<Mycontext.Provider value={[type,setType,color,setColor]}>
{children}
</Mycontext.Provider>
)
}
export default Context
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Context from './Context';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Context>
<BrowserRouter>
<App />
</BrowserRouter>
</Context>
);
now when I call it as :
Const[type,setType]= createContext(Context);
in any component, the whole page goes blank I don't know what I did wrong here

React Vite - How do I link a different page in React?

I just started learning React but I can't for the life of me figure out how to link a new file to the App.jsx file. I've seen related questions but the setups are all quite different to mine. I used the default Vite template provided (for the most part). I've provided simple snippets of code below.
App.jsx code below:
import React from 'react'
import { useState } from 'react'
import './App.css'
import Pets from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
The page I'd like to link:
import React from 'react'
function Animals() {
return(
<div>
<h3>Pets for Africa</h3>
<ul>
<li>dogs</li>
<li>cats</li>
</ul>
</div>
)
}
export default Animals
The default main.jsx file which is part of the Vite template
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
Change the default import's name to Animals
import React from 'react'
import { useState } from 'react'
import './App.css'
import Animals from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
This should work in your case.
Aren't you trying to import file Pets which has name Animals? If yes, simply rename the import Pets from './components/Pets' to import Animals from './components/Animals'

cannot render a <Router> inside another <Router>. You should never have more than one in your app

This is my index.js code
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "#fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { createStore } from "redux";
import { userReducer } from "../src/reducers/UserReducer";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/LocalStorage";
const persistedState = loadState();
let store = createStore(userReducer, persistedState);
store.subscribe(() => saveState(store.getState()));
render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
This is the error I am getting on browser
"Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app."
Please help me with some solution.
I guess you are using React Router 6. They dropped support for nested Routers(like MemoryRouter inside of BrowserRouter or any other combinations)
https://github.com/remix-run/react-router/issues/7375
There is rather a hack with <UNSAFE_LocationContext.Provider but as name suggests it's not guaranteed this will work for any(even patch version) updates.
I suggest you either going back to V5 or getting rid of nesting.

React multiple import one module caching re-use

I am using Centrifugo websocket server. I need to connect to Centrifugo and store connection instance for future usage from from multiple components.
Will it be the good way to create this kind of export from ./socket.js? Will centrifuge.connect() and centrifuge.setToken('') be executed if I gonna import ./socket.js module muitiple times?
./socket.js
const Centrifuge = require('centrifuge');
const centrifuge = new Centrifuge('ws://localhost:8000/connection/websocket');
centrifuge.setToken('');
centrifuge.connect();
export default {
socket: centrifuge,
};
./App.jsx
import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';
export default () => (
<>
<SomeComponent />
<SomeSecondComponent />
</>
)
./components/SomeComponent.jsx
import React from 'react';
import { socket } from '../socket'; // second import
export default () => <>...</>;
./components/SomeSecondComponent.jsx
import React from 'react';
import { socket } from '../socket'; // third import
export default () => <>...</>;
What would it be the best way to make instance and reuse it?
If you want to use a single instance only, it's better to import it in one place only. Best to import in the parent component and pass it as props to the children.
So your app.jsx would become:
import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';
export default () => (
<>
<SomeComponent socket={socket} />
<SomeSecondComponent socket={socket} />
</>
)
Now socket will be available as the props in both the components.
For eg. In ./components/SomeComponent.jsx
import React from 'react';
export default ({socket}) => <>...</>;

How to use redux with fela and react?

fist thanks for your attention.
I am trying to use fela for dynamically styling my component. Also for manage the states of app, we need to use redux. In fela we need to use a Provider to wrap all component of app. also in redux we have the same thing. for example the root of the app we have :
import { createRenderer } from 'fela'
import { Provider } from 'react-fela'
import { render } from 'react-dom'
import React from 'react'
const renderer = createRenderer()
render(
<Provider renderer={renderer}>
<App />
</Provider>,
document.getElementById('app')
)
and in root of redux app we have:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
And my problem is how to use this packages together.
when use as syntax in import can solve this problem. for example:
import React from 'react'
import { render } from 'react-dom'
import { Provider as ReduxProvider } from 'react-redux'
import { Provider as FelaProvider } from 'react-fela'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<ReduxProvider store={store}>
<FelaProvider>
<App />
</FelaProvider>
</ReduxProvider>,
document.getElementById('root')
)

Categories