I'm just learning some react stuff at the moment and am running into an error when trying to implement https://www.npmjs.com/package/textarea-markdown this.
I think the error comes from the fact that the script is attempting to change the textarea before the textarea is loaded, but I don't know how to fix it.
Any help is much appreciated
Code below
text.js
import React, { Component } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'
let textarea = document.querySelector("textarea");
new TextareaMarkdown(textarea);
function Texts() {
return (
<div >
<h2>Editor</h2>
<textarea id="editor" data-preview="#preview"></textarea>
<h2>Preview</h2>
<div id="preview"></div>
</div>
);
}
export default Texts;
App.js
import logo from './logo.svg';
import './App.css';
import Texts from './components/texts/texts';
function App() {
return (
<div className="App">
<header className="App-header">
<Texts></Texts>
</header>
</div>
);
}
export default App;
The error I receive is this
TypeError: Cannot read property 'getAttribute' of null
TextareaMarkdown.setPreview
node_modules/textarea-markdown/lib/textarea-markdown.js:65
62 | value: function setPreview() {
63 | var _this2 = this;
64 |
> 65 | var selector = this.textarea.getAttribute('data-preview');
| ^ 66 | if (selector) {
67 | Array.from(document.querySelectorAll(selector), function (e) {
68 | return _this2.previews.push(e);
View compiled
You can use you following code inside a useEffect
as like following
import React, { Component, useEffect } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'
function Texts() {
useEffect(()=>{
let textarea = document.querySelector("textarea");
new TextareaMarkdown(textarea);
},[]);
return (
<div >
<h2>Editor</h2>
<textarea id="editor" data-preview="#preview"></textarea>
<h2>Preview</h2>
<div id="preview"></div>
</div>
);
}
export default Texts;
Related
Hello I am new to stack overflow and even JS so sorry in advance if i get something wrong.
So i am having issues with trying to import a navbar from daisyUI, I made a file called navBar.js and i wrote this:
const navbar = () => {
return (
<div className="navbar bg-primary text-primary-content">
<a className="btn btn-ghost normal-case text-xl">daisyUI</a>
</div>
);
}
export default navbar;
and for my app.js file:
import navBar from "./navBar";
import './App.css';
import {useState, useEffect} from "react";
import {db} from "./firebase-config"
import {collection, getDocs, addDoc} from "firebase/firestore";
function App() {
return (
<div className="flex">
<navBar />
</div>
);
}
export default App;
the issue is that the server shows a blank file. I have two errors:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/App.js: Unexpected token, expected "..." (10:10)
8 | return (
9 | <div className="flex"{
> 10 | <navBar />
| ^
11 | </div>
12 | }
13 | );
And
ERROR in [eslint]
src/App.js
Line 10:10: Parsing error: Unexpected token, expected "..." (10:10)
Can someone please help me with this? I honestly searched around and couldn't find nothing.
Thank you
I tried searching online for some form of help. I was following this tutorial on youtube as well.
text
I have been searching through google for this for about an hour and have decided that I will likely need more direct assistance instead of just looking at other people's post.
My goal is to be able to have a jest test using this library https://github.com/testing-library/react-testing-library to be able to use the 'render' function and check that a StaticImage component inside of a custom component is rendered.
Currently this is my NavBar.tsx:
import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
import Test from '../Test/Test';
const NavBar: React.FC = () => {
return (
<nav data-testid="nav-bar">
<Test siteTitle="TestssS" />
<StaticImage src="../../images/logo.png" alt="Logo" />
</nav>
);
};
export default NavBar;
And this is my NavBar.test.tsx:
import React from 'react';
import { render } from '#testing-library/react';
import NavBar from './NavBar';
describe('Ensuring NavBar is Rendered', () => {
test('Ensuring Navbar is in the page', () => {
const { getByTestId } = render(<NavBar />);
expect(getByTestId('nav-bar')).toBeInTheDocument();
});
});
describe('Squarehook logo is inside navbar', () => {
test('Ensure Logo is in Navbar', async () => {
const { getByAltText } = await render(<NavBar />);
expect(getByAltText('Logo')).toBeInTheDocument;
});
});
The test I am talking about is the 'Ensure Logo is in Navbar' test at the bottom. Ideally, I'd be rendering the NavBar component which would have the StaticImage component. Theoritically once StaticImage has completed rendering there would be an img tag with the alt attribute of 'Logo'.
However once I run npm test I get this result:
TestingLibraryElementError: Unable to find an element with the alt text: Logo
Ignored nodes: comments, <script />, <style />
<body>
<div>
<nav
data-testid="nav-bar"
>
<h1
class="header"
data-testid="test"
>
TestssS
</h1>
</nav>
</div>
</body>
13 | test('Ensure Logo is in Navbar', async () => {
14 | const { getByAltText } = await render(<NavBar />);
> 15 | expect(getByAltText('Logo')).toBeInTheDocument;
| ^
16 | });
17 | });
18 |
at Object.getElementError (node_modules/#testing-library/dom/dist/config.js:38:19)
at node_modules/#testing-library/dom/dist/query-helpers.js:90:38
at node_modules/#testing-library/dom/dist/query-helpers.js:62:17
at getByAltText (node_modules/#testing-library/dom/dist/query-helpers.js:111:19)
at Object.<anonymous> (src/compontents/NavBar/NavBar.test.tsx:15:12)
You can see from the log above that the nav and the Test component get rendered, but for some reason there is no StaticImage/Img element at this point in time. I was reading a resource that said I may have needed to add await to those commands so I tried that on all of them but without any success.
I am using Gastby with Typescript.
the packages that are related to this is the
gatsby-plugin-image and the #testing-library/react.
I appreciate any help in advance!
I want to make a button to link to a different app with react librery.
my code looks like this
import React, { Component } from "react";
import { Link, NavLink, Redirect } from "react-router-dom";
import "./subportfolio.scss";
import Coffee1 from "../../assets/coffee-1.jpg";
import Coffee2 from "../../assets/coffee-2.jpg";
import Coffee3 from "../../assets/coffee-3.jpg";
import Coffee4 from "../../assets/coffee-4.jpg";
import CoffeeShop from "../../assets/coffee-shop-1.jpg";
import Tea1 from "../../assets/tea-1.jpg";
import Tea2 from "../../assets/tea-2.jpg";
import Tea3 from "../../assets/tea-3.jpg";
class SubPortfolio extends Component {
state = {
projectImg: {
project1: Coffee1,
project2: Coffee2,
project3: Coffee3,
project4: Coffee4,
project5: CoffeeShop,
project6: Tea1,
project7: Tea2,
project8: Tea3
},
direct: ""
};
directToGithub = () => {
this.props.history.go("https://github.com");
};
render() {
console.log(this.state.direct);
return (
<div className="subPortfolio">
<div className="subPortfolio__content">
<div className="subPortfolio__content--detail">
<h2>Image Format</h2>
<div className="subPortfolio__content--refer">
<div className="subPortfolio__content--button">
<button
id="github"
type="button"
onClick={this.directToGithub}
>
github
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default SubPortfolio;
I tried all of the history properties but all of them throw an error
TypeError: Cannot read property 'go' of undefined
SubPortfolio.directToGithub
C:/Users/Ermais Kidane/Documents/REACT/portfolio/src/components/subportfolio/subportfolio.js:30
27 | };
28 |
29 | directToGithub = () => {
> 30 | this.props.history.go("https://github.com");
| ^ 31 | };
32 | render() {
33 | // const projectsImage = Object.keys(this.state.projectImg).map(proImg => {
I tried using Link React-router-dom and to adds to with the previous url like (http://localhost:3000/https://github.com) and does not take make anywhere.
how could I make the link to another web site? thanks for your help.
If you are trying to get directed to an external website, just use the standard <a></a> tag
<button id="github" type="button">github</button>
if you are trying to use the <Link> to get directed to an internal link, it would look more like this
<Link to="/github"><button id="github" type="button">github</button></Link>
And the link would then have to be setup in the app.js using the router to then be directed to the named component
If you want to programmatically direct to an external website, you can also use window.location = "https://github.com" or, assuming a global window object, location = "https://github.com".
Is it not possible to declare some react function components that nest and render one of them via the react-testing-libary?
Here is my attempt:
RestaurantIdContext.js
import React from "react"
const RestaurantIdContext = React.createContext(null)
export const RestaurantIdProvider = RestaurantIdContext.Provider
export const RestaurantIdConsumer = RestaurantIdContext.Consumer
export default RestaurantIdContext
RestaurantIdContext.test.js
import React, { useContext } from "react"
import { render } from "#testing-library/react"
import "#testing-library/jest-dom/extend-expect"
import RestaurantIdContext, { RestaurantProvider, RestaurantConsumer } from "./RestaurantIdContext"
describe("RestaurantIdContext", () => {
it("makes it possible to get the restaurant ID", () => {
function NestedComponent() {
const restaurantId = useContext(RestaurantIdContext)
return <p>Restaurant ID: {restaurantId}</p>
}
function GreatGrandParentComponent() {
return (
<div>
<RestaurantProvider value="123456">
<div>
<div>
<NestedComponent />
</div>
</div>
</RestaurantProvider>
</div>
)
}
const { getByText } = render(<GreatGrandParentComponent />)
expect(getByText("Restaurant ID").textContent).toBe("Restaurant ID: 123456")
})
})
Then jest test throws this at me:
● RestaurantIdContext › makes it possible to get the restaurant ID
Invariant Violation: Element type is invalid: expected a string (for built-in compo
nents) or a class/function (for composite components) but got: undefined. You likely fo
rgot to export your component from the file it's defined in, or you might have mixed up
default and named imports.
Check the render method of `GreatGrandParentComponent`.
26 | }
27 |
> 28 | const { getByText } = render(<GreatGrandParentComponent />)
| ^
29 |
30 | expect(getByText("Restaurant ID").textContent).toBe("Restaurant ID: 123456")
31 | })
Any help will be appreciated, thank you!
You forgot an Id in the named imports ;)
I'm testing out the gatsby-source-wordpress plugin from Gatsby, and I'm trying to get my menu to fetch the links from my Wordpress site.
I've managed to get all of the Wordpress schemas to come up in GraphiQL, and copied the GQL code from there.
I've made a Layout component, where I've tried most of what I can to make it work. However, I keep getting TypeError: Cannot read property 'props' of undefined when I deploy my Gatsby site to localhost.
Anyone ever come across this before? I'm kinda new to GraphQL and all that, so I honestly have no clue what's wrong, or if it's even GraphQL that's causing this. Any help is greatly appreciated! (Sorry if this is a really simple fix, and I'm just being ignorant)
I've searched through Google, Stack Overflow, Youtube, and anywhere else I could think of.
Code
Layout
import React, { Component } from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
// import Image from "gatsby"
import Header from "../Header";
import MainMenu from "../Nav";
// import Aside from "../Aside"
// import Footer from "../Footer";
const Layout = ({ children }) => {
const menu = this.props.data.allWordpressWpApiMenusMenusItems;
return (
<StaticQuery
query={graphql`
query menuQuery {
allWordpressWpApiMenusMenusItems {
edges {
node {
id
name
items {
title
object_slug
url
}
}
}
}
}
`}
render={menu => (
<>
<Header>
<MainMenu menu="{data.allWordpressWpApiMenusMenusItems}" />
</Header>
<div className="Layout">
<main>{children}</main>
</div>
<footer>Footer</footer>
</>
)}
/>
);
};
Layout.propTypes = {
children: PropTypes.node.isRequired
};
export default Layout;
Menu component
import React, { Component } from "react";
// import { Link } from "gatsby";
class MainMenu extends Component {
render() {
const data = this.props.data.allWordpressWpApiMenusMenusItems;
console.log(data);
return (
<nav className="main-menu">
<ul>
<p>Test</p>
</ul>
</nav>
);
}
}
export default MainMenu;
Expected result: The site renders on localhost:8000
Error messages I recieve:
src/components/Layout/index.js:11
8 | // import Aside from "../Aside"
9 | // import Footer from "../Footer";
10 |
> 11 | const Layout = ({ children }) => {
12 | const menu = this.props.data.allWordpressWpApiMenusMenusItems;
13 | return (
14 | <StaticQuery
You're accessing this.props in a function based component. Change your declaration to
const Layout = ({ children, data }) => {
const menu = data.allWordpressWpApiMenusMenusItems;
Or explicitly declare props and destructure the properties you want
const Layout = props => {
const { data, children, ...rest } = props
const menu = data.allWordpressWpApiMenusMenusItems;