Editor is working but dropdown not working,
toolbar image
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const MyEditor = () => {
let editorState = EditorState.createEmpty();
const [description, setDescription] = useState(editorState);
const onEditorStateChange = (editorState) => {
setDescription(editorState);
};
return (
<div>
<Editor
editorState={description}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={onEditorStateChange}
/>
</div>
);
};
export default MyEditor;
When clicking on the dropdown it shows following warning in console
Console image
Change your index.js
from
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
to
import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom"; // add this
render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Related
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
index.js file:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
store.js file:
import { configureStore } from '#reduxjs/toolkit';
import userReducer from '../features/userSlice';
export default configureStore({
reducer: {
user: userReducer,
},
});
ERROR:- ERROR in ./src/index.js 16:11-16
export 'store' (imported as 'store') was not found in './app/store'
(possible exports: default)
You export store as default export you need to import it as default
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
You are wrong coming from two reasons:
Reason number one: you already export the store as default and you import it with {} the first thing you should remove is the {}. to be like below:
import store from './app/store';
Reason number one:
Write store in capital letters to be Store finally to be like below:
import Store from './app/store';
I have been trying to make a button using react-bootstrap. However, I cannot render it when deploying the server.
This is the App.js
import "./App.css";
import Search from "./pages/Search";
import Home from './pages/home';
import {Button} from 'react-bootstrap';
import { Routes, Route } from 'react-router-dom';
const App = () => (
<div className="App">
<Button>Testing Button</Button>
<Search />
</div>
)
export default App;
Note : the is a page for rendering search API.
This is the Index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById("root")
);
I am trying to build a simple click counter in which the counter will increase by 1(initially 0) with each click. But the error I am getting is 'show' is defined but never used.The function 'show' re-renders the DOM after each click as given in index.js file.
App.js file-
import './App.css';
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div onClick={this.props.onClick}>This div has been clicked {this.props.clicks} times.</div>
);
}
}
export default App;
index.js file-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
let model = { clicks: 0 };
function show() {
ReactDOM.render(<App clicks={model.clicks} onClick={()=> { model.clicks += 1; show();}} />, document.getElementById('root'));
}
reportWebVitals();
Change your index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
class Index extends React.Component {
state = {
clicks: 0
};
render() {
return (
<App
clicks={this.state.clicks}
onClick={() => this.setState((props) => ({ clicks: props.clicks + 1 }))}
/>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
Codesandbox: https://codesandbox.io/s/dark-firefly-i30t5?file=/src/index.js
This is my code:
import 'core-js';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import configureStore from 'src/store/configureStore';
import createRootReducer from 'src/store/rootReducer';
import App from './Main/App';
import './index.css';
const history = createBrowserHistory();
const { store } = configureStore({ history, initialState: {} });
const render = () => {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<App history={history} />
</Provider>
</AppContainer>,
document.getElementById('root')
);
};
render(App);
if (module.hot) {
module.hot.accept('./Main/App', () => {
return render();
});
module.hot.accept('./store/rootReducer', () => {
store.replaceReducer(createRootReducer(history));
});
}
I'm getting errors like:
- Error TypeScript '>' expected. 22:17
Which is complaining about:
<AppContainer>
and here:
- the left hand side of an arithmetic operation must be of type any
<App history={history} />
I don't have 'strict' set in my config.
Any advice on this. thanks