I have started learning React and I was creating the navigation bar.
I have leftNavigationBar defined like this
const LeftNavigationBar = (props) => {
return (
<header className={share.mypage_header} id="leftcolumn">
<Helmet>
<script type="text/babel" src="../../common/js/share.js" />
</Helmet>
</header>
);
};
export default LeftNavigationBar;
but share.js did not detected.
I put require('../../common/js/share.js'); on the top and it started working and code becomes like this
require('../../common/js/share.js');
const LeftNavigationBar = (props) => {
return (
<header className={share.mypage_header} id="leftcolumn">
<Helmet>
<script type="text/babel" src="../../common/js/share.js" />
</Helmet>
</header>
);
};
export default LeftNavigationBar;
I want to know why share.js did not worked when added inside Helmet but worked when added as require on top.
Please help.
Related
Despite having seen working examples of this in non remix projects, it doesn't seem to work in the way I'm implementing it?
I have the following in root.tsx:
export const MyContext = createContext("default");
function Document({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body className="root-body">
<MyContext.Provider value="bonjour!">
<Header />
</MyContext.Provider>
{children}
<ScrollRestoration />
<Scripts />
<LiveReload />
<Footer />
</body>
</html>
);
}
export default function App() {
return (
<Document>
<Outlet />
</Document>
);
}
In my <Header/> component I have:
import { useContext } from "react";
import { MyContext } from "~/root";
export const Header = () => {
const result = useContext(MyContext);
console.log(result);
return(null)
}
The result is then that "default" is printed to the console, but surely from my understanding it should be "bonjour"?
Where am I going wrong?
The output on the server console is from Remix SSR. It does appear that the context is not being applied during server rendering. However, it does show up correctly after hydration. Unfortunately it also results in hydration errors (see browser console).
Anyway, that does seem odd. My understanding is that you can use most hooks server side (except for useEffect and useLayoutEffect).
https://codesandbox.io/s/remix-react-context-mzexmt
I have created a context component in React to return a message across all my React pages.
I am getting the error in the subject. Looked at other questions in stackoverflow but none could help me.
Here is the code:
message.js
function Message(props) {
const messageCtx = useContext(MessageBannerContext);
return ReactDOM.createPortal(
<div>
<p>Message</p>
<button>More info</button>
<button onClick={messageCtx.hideMessage}>Ok</button>
</div>,
useEffect(() => {
document.getElementById('message');
}, [])
);
}
export default Message;
_document.js
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<DeferNextScript />
</body>
<div id="message"></div>
</Html>
);
}
}
export default MyDocument;
Any ideas why I am getting the error in the subject?
Nextjs is run in the server, so the Document Object isn't defined. I've always struggled with that, however you can try a package named jsdom.
thanks for taking the time to look at this.
I am struggling to find out how to make this work specifically in react.
I have used contentEditable to get the div element to be editable and then i have used Refs to make the div reference its innerHTML. But the information does not seem to be put into the state of body.
The ultimate aim is to have it saved in a database, and then loaded to replace the div.
code:
import React, {useState, useRef} from "react";
import "./styles.css";
export default function App() {
let myRef= useRef()
const [body, setBody] = useState("");
let click = () => {
setBody(myRef.innerHTML)
}
return (
<div className="App">
<h1 ref={myRef}>Hello CodeSandbox</h1>
<div></div>
<h1 contentEditable={true}> rewrite me!</h1>
<button onClick={click}> CLICK!</button>
<h1>{body}</h1>
</div>
);
}
sandbox
https://codesandbox.io/s/wispy-glitter-nfym4?file=/src/App.js
Access the innerHTML using myRef.current.innerHTML.
From the docs
When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
function App() {
let myRef = React.useRef();
const [body, setBody] = React.useState("");
let click = () => {
setBody(myRef.current.innerHTML);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div></div>
{/* I think you misassigned your `myRef`, shouldn't it be on this h1? */}
{/* suppressContentEditableWarning=true, to suppress warning */}
<h1 ref={myRef} contentEditable={true} suppressContentEditableWarning={true}> rewrite me!</h1>
<button onClick={click}> CLICK!</button>
<h1>{body}</h1>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
I'm using Facebook Comments plugin for my React website. Plugin section is displayed ONLY after reloading the page. Does anybody know the solution?
index.html
---
<body>
<div id="root"></div>
<div id="fb-root"></div>
<script async defer
crossorigin="anonymous"
src="https://connect.facebook.net/uk_UA/sdk.js#xfbml=1&version=v8.0"
nonce="2CmNBc9x"
></script>
</body>
OnlineReception.jsx // here I want to render FC plugin
---
import React from 'react';
import './css/OnlineReception.css';
const OnlineReception = (props) => {
...
return (
<div className="OnlineReception">
...
<div className="fb-comments"
data-href="mywebsite-link-here"
data-numposts="10"
data-width=""
></div>
</div>
)
}
export default OnlineReception;
SDK integration is taken from here.
Also, I'm using HashRouter
{/* online-reception route */}
<Route path="/online-reception" render={
() =>
<OnlineReception
props here
/>
} />
I have been trying to add facebook feed to a gatsby website that I'm working on and it doesn't seem to work!
I've tried to add the scripts in gatsby-ssr.js
const React = require("react")
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<div id="fb-root"></div>,
<script
async={true}
defer={true}
crossOrigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
></script>,
])
}
then in component
<div
className="fb-page"
data-href="https://www.facebook.com/TechnoBondCo/"
data-tabs="timeline"
data-width="400"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote
cite="https://www.facebook.com/TechnoBondCo/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/TechnoBondCo/">
تكنوبوند - صناع الكلادينج Techno Bond
</a>
</blockquote>
</div>
but it didn't work, I also tried to use react-facebook but I cant seem to change the width or height of the iframe
any idea how to do this?
ERRORS USING REACT HELMET
I get this console error:
- warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'
and get this browser error:
You need to use <Helmet> tag, like this:
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
You can check for further information about Gatsby's Helmet, and React Helmet, but basically, <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.
You can use it in any component, for example, in IndexPage component it would be:
import { Helmet } from 'react-helmet';
const IndexPage = () => (
<Layout>
<SEO title="Live" />
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
I've tested in my local machine it loads perfectly as it shows the following screenshot: