I was learning react and firebase but my app keeps showing this error and can't continue
Uncaught (in promise) TypeError: n.indexOf is not a function
at rt.fromString (index.esm2017.js:1032:1)
this is my code
import React, { useRef, useState } from 'react'
import styled from 'styled-components'
import { Button } from '#mui/material'
import { collection, doc,addDoc,serverTimestamp } from "firebase/firestore";
import { db } from '../firebase'
function ChatInput(chatName,channelId) {
const [input,setInput] = useState('')
console.log(channelId);
const sendMessage = async e =>{
e.preventDefault()
if(!channelId){
return false
}
const messageRef = doc(db, "rooms", channelId);
await addDoc(collection( messageRef,"messages"), {
message: input,
timestamp: serverTimestamp(),
user:'Abd',
userImage:'img'
});
setInput('')
}
return (
<ChatInputContainer>
<form>
<input value={input} onChange={e=>setInput(e.target.value)} placeholder={`Message #ROM`} />
<Button hidden type='submit' onClick={sendMessage}>
send
</Button>
</form>
</ChatInputContainer>
)
}
export default ChatInput
const ChatInputContainer = styled.div`
border-radius: 20px;
>form{
position: relative;
display: flex;
justify-content: center;
}
>form>input{
position: fixed;
bottom: 30px;
width: 60%;
border: 1px solid gray;
border-radius: 3px;
padding: 20px;
outline: none;
}
>form>button{
display: none !important;
}
`
if you need anything ask me
I tried updateDoc() setDoc() and many other answers from stack overflow
Related
Pagination.jsx
import { Box } from "#chakra-ui/react";
import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";
import "./Pagination.css";
export function ReactPagination({ lastPage, filterData }) {
const [pageCount, setPageCount] = useState(0);
useEffect(() => {
setPageCount(lastPage);
}, [lastPage]);
// Invoke when user click to request another page.
const handlePageClick = (event) => {
filterData(event.selected + 1);
};
return (
<Box w="full">
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={4}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
containerClassName="pagination"
previousLinkClassName="pagination__link"
nextLinkClassName="pagination__link"
disabledClassName="pagination__link--disabled"
activeClassName="pagination__link--active"
/>
</Box>
);
}
Pagination.css
//css for react paginate
.pagination {
list-style: none;
display: flex !important;
gap: 4px;
justify-content: space-between;
background: red;
}
.pagination a {
padding: 10px;
border-radius: 5px;
border: 1px solid #6c7ac9;
color: #6c7ac9;
}
.pagination__link {
font-weight: bold;
}
.pagination__link--active a {
color: #fff;
background: #6c7ac9;
}
.pagination__link--disabled a {
color: rgb(198, 197, 202);
border: 1px solid rgb(198, 197, 202);
}
The pagination className in containerClassName is not getting applied but it's strange that other styles like disabledClassName, activeClassName are applied. I am trying to display lists in row but it is not working. Is there any reason or any package updates that is causing this issue?
I'm following a tutorial and everything was going great until I tried to implement Navigation through a search input. For instance, If I am on http://localhost:3000/searched/profile. Typing out an input of 'names' in the search bar should take me to http://localhost:3000/searched/names. In the tutorial it worked that way and I believe I did the same thing but it doesn't work for me
First below is the Search component for the search bar and its input
And then the Pages where my routing is done. My Browser Router is in the App.js.
import styled from "styled-components"
import { FaSearch } from 'react-icons/fa'
import { useState } from 'react'
import {useNavigate} from 'react-router-dom'
function Search() {
const [input, setInput] = useState('');
const navigate = useNavigate();
const submitHandler = (e) => {
e.preventDefault();
navigate('/searched/' + input) (I GUESS THIS IS WHAT IS NOT WORKING)
};
return (
<FormStyle onSubmit={submitHandler}>
<div>
<FaSearch></FaSearch>
<input onChange={(e) => setInput(e.target.value)} type="text" value={input}/>
</div>
<h1>{input}</h1>
</FormStyle>
)
}
const FormStyle = styled.div`
margin: 0 20rem;
div{
width: 100%;
position: relative;
}
input{
border: none;
background: linear-gradient(35deg, #494949, #313131);
border-radius: 1rem;
outline: none;
font-size: 1.5rem;
padding: 1rem 3rem;
color: white;
width: 100%;
}
svg{
position: absolute;
top: 50%;
left: 0%;
transform: translate(100%, -50%);
color: white;
}
`
export default Search
Pages
import Home from "./Home"
import { Route, Routes } from 'react-router-dom'
import Cuisine from "./Cuisine"
import Searched from "./Searched"
function Pages() {
return (
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/cuisine/:type' element={<Cuisine/>} />
<Route path='/searched/:search' element={<Searched/>} />
</Routes>
)
}
export default Pages
The FormStyle component is a styled div element instead of a form element, so the onSubmit handler is meaningless on the div. To resolve you should use the form element so the form submission works as you are expecting.
Search.js Example:
import styled from "styled-components";
import { FaSearch } from "react-icons/fa";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
function Search() {
const [input, setInput] = useState("");
const navigate = useNavigate();
const submitHandler = (e) => {
e.preventDefault();
navigate("/searched/" + input);
};
return (
<FormStyle onSubmit={submitHandler}> // <-- (2) onSubmit works now
<div>
<FaSearch></FaSearch>
<input
onChange={(e) => setInput(e.target.value)}
type="text"
value={input}
/>
</div>
<h1>{input}</h1>
</FormStyle>
);
}
const FormStyle = styled.form` // <-- (1) switch to form element
margin: 0 20rem;
div {
width: 100%;
position: relative;
}
input {
border: none;
background: linear-gradient(35deg, #494949, #313131);
border-radius: 1rem;
outline: none;
font-size: 1.5rem;
padding: 1rem 3rem;
color: white;
width: 100%;
}
svg {
position: absolute;
top: 50%;
left: 0%;
transform: translate(100%, -50%);
color: white;
}
`;
export default Search;
I have a Notification component :
import React, { useContext } from "react"
import Wrapper from "./Wrapper"
import context from "./context"
import Close from "./Close"
const Notification = ({ children }) => {
const { type } = useContext(context)
return (<Wrapper type={type}>
<Close /> {// This component does not apply styles !!}
{children}
</Wrapper>)
}
export default Notification
My Wrapper :
import styled from "styled-components"
const Wrapper = styled.div`
position:absolute;
bottom:0;
right:0;
margin-right:1.2em;
margin-bottom:1.2em;
background-color: #fff;
padding:15px;
min-width:350px;
min-height:100px;
border-radius:20px;
box-shadow: 0px 4px 30px 0px ${({ type }) => pickShadowColor(type)}}`
const pickShadowColor = (type) => {
switch (type) {
case "info": return "rgba(51,153,255,0.3)";
case "warning": return "rgba(255,157,0,0.3)";
case "success": return "rgba(0,216,0,0.3)";
case "error": return "rgba(255,0,0,0.3)";
default: return "rgba(190,190,190,0.3)";
}
}
export default Wrapper
The result is :
The problem is with Close component while it has a custom style but it still shows the default style of button.
Close component :
import React from 'react';
import { Button } from './Button';
const Close = () => (
<Button>close</Button>
)
export default Close;
and the styled Button :
import styled from 'styled-components';
export const Button = styled.button({
'background-color': 'red'
})
Expected Behavior
The button should be red.
Actual Behavior
The button has a default style.
Additional Info
Navigator: Chrome.
The button does not accept any styles.
The problem its on box-shadow. You are missing a ; and have an extra {
Change it FROM:
box-shadow: 0px 4px 30px 0px ${({ type }) => pickShadowColor(type)}}`;
TO:
box-shadow: 0px 4px 30px 0px ${({ type }) => pickShadowColor(type)};`;
The complete style:
const Wrapper = styled.div`
position: absolute;
bottom: 0;
right: 0;
margin-right: 1.2em;
margin-bottom: 1.2em;
background-color: #fff;
padding: 15px;
min-width: 350px;
min-height: 100px;
border-radius: 20px;
box-shadow: 0px 4px 30px 0px ${({ type }) => pickShadowColor(type)};
`;
I'm quite new to React, and i'm trying to make a ToDoList. I have a Modal with a submit button that when pressed should add a ToDoItem. But since i didn't want to prop drill my way through this i wanted to use the Context API. The Context API confuses me quite a bit, maybe i'm just a moron, but i have a hard time understanding why i have to make a hook and pass that as the value in the provider. I thought that in the ToDoContext that i already defined the default value as a empty array, so i just did it again.
In the console at line 62, which is my initial render it says that it's undefined, after the pressing the Add ToDo I get the same message.
App.jsx
import React, { useState } from "react";
import { render } from "react-dom";
import { ThemeProvider } from "emotion-theming";
import { defaultTheme } from "./theme";
import { Global, css } from "#emotion/core";
import Header from "./components/Header";
import ToDoList from "./components/ToDoList";
import AddBtn from "./components/AddBtn";
import ToDoContext from "./ToDoContext";
const App = () => {
const [toDoItems] = useState([]);
return (
<>
{/*Global styling*/}
<Global
styles={css`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
`}
/>
{/*App render start from here*/}
<ThemeProvider theme={defaultTheme}>
<ToDoContext.Provider value={toDoItems}>
<Header />
<main>
<ToDoList />
<AddBtn />
</main>
</ToDoContext.Provider>
</ThemeProvider>
</>
);
};
render(<App />, document.getElementById("root"));
ToDoContext.jsx
import { createContext } from "react";
const ToDoContext = createContext([[], () => {}]);
export default ToDoContext;
AddBtn.jsx
import React, { useState, useContext } from "react";
import { css } from "emotion";
import Modal from "../Modal";
import ToDoContext from "../ToDoContext";
const BtnStyle = css`
position: fixed;
bottom: 0;
right: 0;
cursor: pointer;
display: block;
font-size: 7rem;
`;
const ModalDiv = css`
position: fixed;
left: 50%;
background-color: #e6e6e6;
width: 60%;
padding: 20px 20px 100px 20px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
height: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
top: 50%;
`;
const textareaStyle = css`
resize: none;
width: 100%;
height: 200px;
font-size: 1.25rem;
padding: 5px 10px;
`;
const timeStyle = css`
font-size: 3rem;
display: block;
`;
const modalSubmit = css`
width: 100%;
font-size: 3rem;
cursor: pointer;
margin-top: auto;
`;
const Label = css`
font-size: 2rem;
text-align: center;
display: inline-block;
margin-bottom: 50px;
`;
const AddBtn = () => {
const [showModal, setShowModal] = useState(true);
const [time, setTime] = useState("01:00");
const [toDoItems, setToDoItems] = useContext(ToDoContext);
console.log(toDoItems);
return (
<>
<div className={BtnStyle} onClick={() => setShowModal(!showModal)}>
<ion-icon name="add-circle-outline"></ion-icon>
</div>
{showModal ? (
<Modal>
<div className={ModalDiv}>
<div>
<label className={Label} htmlFor="time">
Time
<input
className={timeStyle}
type="time"
name="time"
value={time}
onChange={(e) => setTime(e.target.value)}
/>
</label>
</div>
<label className={Label} htmlFor="desc">
Description
<textarea
className={textareaStyle}
name="desc"
placeholder={`Notify yourself this message in ${time}`}
></textarea>
</label>
<button
className={modalSubmit}
onClick={() => {
setToDoItems(
toDoItems.push({
time,
})
);
}}
>
Add ToDo
</button>
</div>
</Modal>
) : null}
</>
);
};
export default AddBtn;
There are few issues in your code to fix:
useState returns a value and a setter. With this line of code, const [toDoItems] = useState([]);, you are just passing an empty array to your context.
So do this:
const toDoItems = useState([]);
In your ToDoContext.js, just pass an empty array as argument (initial value)
const ToDoContext = createContext([]);
Working copy of your code is here. (see console logs)
Also, I noticed that you are pushing the todo in setTodoItems in AddBtn.js.
Don't do this:
onClick={() => {
setToDoItems(
toDoItems.push({
time
})
);
}}
Do this:
onClick={() => {
setToDoItems(
toDoItems.concat([
{
time
}
])
);
}}
I have this error with draft-js with draft-js-plugins-editor
STRANGE BEHAVIOR: it only happens, when I refocus to first line of editor after writing, when trying to set for eg. the header of first line to H1 it changes previous focused line
ERROR: Uncaught TypeError: Cannot read property 'getIn' of undefined
FULL ERROR:
Uncaught TypeError: Cannot read property 'getIn' of undefined
at getUpdatedSelectionState (getUpdatedSelectionState.js?a009439:34)
at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js?a009439:37)
at getDraftEditorSelection (getDraftEditorSelection.js?a7f8e9b:35)
at editOnSelect (editOnSelect.js?a7f8e9b:32)
at DraftEditor.react.js?f8ee1ff:148
at HTMLUnknownElement.callCallback (react-dom.development.js?5f39724:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js?5f39724:581)
at Object.invokeGuardedCallback (react-dom.development.js?5f39724:438)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?5f39724:452)
at executeDispatch (react-dom.development.js?5f39724:836)
This is my component:
/* eslint-disable react/no-multi-comp */
import React, {Component} from 'react';
import sv from '../../config/styleVariables'
import Editor from 'draft-js-plugins-editor';
import {EditorState,convertToRaw} from 'draft-js'
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import {
ItalicButton,
BoldButton,
UnderlineButton,
HeadlineOneButton,
HeadlineTwoButton,
HeadlineThreeButton,
UnorderedListButton,
OrderedListButton,
BlockquoteButton,
} from 'draft-js-buttons'
export default class TextArea extends Component {
constructor(props){
super(props)
this.state = {
editorState: EditorState.createEmpty(),
}
const toolbarPlugin = createToolbarPlugin({
structure: [
BoldButton,
ItalicButton,
UnderlineButton,
HeadlineOneButton, ,
HeadlineTwoButton,
HeadlineThreeButton,
UnorderedListButton,
OrderedListButton,
// BlockquoteButton,
]
})
const { Toolbar } = toolbarPlugin;
this.Toolbar = Toolbar
this.plugins = [toolbarPlugin];
}
onChange(editorState){
this.setState({
editorState,
})
this.props.update(JSON.stringify(convertToRaw(editorState.getCurrentContent())))
}
focus(){
this.editor.focus();
}
render() {
const {Toolbar, plugins} = this
const {name} = this.props
return (
<div className="TextArea">
{/*language=SCSS*/}
<style jsx global>{`
.TextArea .headlineButtonWrapper {
display: inline-block;
}
.TextArea {
background: ${sv.white};
}
.TextArea > div>div:first-child {
display: flex;
padding: 0 0 .25em 0;
border-bottom: 1px solid ${sv.border};
}
.TextArea > div>div:first-child>div button{
background: transparent;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
width: 3em;
height: 2.5em;
font-size: .8em;
margin-right: .2em;
}
.TextArea > div>div:first-child>div button:hover {
background: ${sv.extraLight};
color: ${sv.primary};
}
.TextArea .DraftEditor-root {
padding: 0 .5em;
cursor: text;
}
.TextArea .headlineButton {
background: #fbfbfb;
color: #888;
font-size: 18px;
border: 0;
padding-top: 5px;
vertical-align: bottom;
height: 34px;
width: 36px;
}
.TextArea .headlineButton:hover,
.TextArea .headlineButton:focus {
background: #f3f3f3;
}
`}
</style>
<div onClick={this.focus.bind(this)}>
<Toolbar key={name} />
<Editor
editorState={this.state.editorState}
onChange={this.onChange.bind(this)}
plugins={plugins}
ref={(element) => {
this.editor = element
}}
/>
</div>
</div>
);
}
}
My component looks like this:
I meet the same problem. It looks like because call editorState.getBlockTree(anchorBlockKey).getIn(...) in getUpdatedSelectionState.js the editorState.getBlockTree(anchorBlockKey) is undefined whenever the block type is unstyled.
I have no idea how to fix it, so make a work around solution like this:
const headerOne = '<h1>Title</h1>';
const blocksFromHTML = convertFromHTML(headerOne);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap
);
this.state = {
editorState: EditorState.createWithContent(state)
}
But there will be another problem when you press enter new line will be H1 either.