I'm trying to render the list of words using MUI pagination but in alphabetical order.
what we have
1,2,3,...,26
what we need
A,B,C,...,Z
wordsList: {
A: [],
B: [],
...,
Z: []
}
You can do it like this:
renderItem={(item) => (
<PaginationItem {...item} page={alphabet[item.page - 1]} />
)}
const { Pagination, PaginationItem } = MaterialUI;
const alphabet = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
function BasicPagination() {
return (
<Pagination
count={alphabet.length}
variant="outlined"
renderItem={(item) => (
<PaginationItem {...item} page={alphabet[item.page - 1]} />
)}
/>
);
}
ReactDOM.createRoot(document.querySelector("#root")).render(<BasicPagination />);
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/#mui/material#5/umd/material-ui.development.js"></script>
<div id="root"></div>
Related
I'm using Gatsby v4.25.3 and I'm trying convert the loading of some third party scripts to the new <Script> tag. I've converted the load of three Bootstrap related files in my html.js file:
import { Script } from "gatsby";
import PropTypes from "prop-types"
import React from "react"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<noscript key="noscript" id="gatsby-noscript">
This app works best with JavaScript enabled.
</noscript>
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/bootstrap.min.js" />
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/jquery.min.js" />
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/popper.min.js" />
<div id="recent-comments" style={{ display: 'none' }}>
<style dangerouslySetInnerHTML={{
__html:
`.form-preview {
display: flex;
flex-direction: column;
justify-content: center;
}`}} />
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Unfortunately, I don't get any errors/warnings/log entries in the browser console for any of the files. Looking in the network dev tab I also don't see the files being requested. The files are served correctly if I manually request them.
I've looked at the documentation and don't see what I'm missing:
https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/
Have you tried setting them in any other file/component rather than the html.js?
const Layout = ({ children }) => {
return (
<>
<Header/>
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/bootstrap.min.js" />
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/jquery.min.js" />
<Script onLoad={() => console.log("success")}
onError={() => console.log("sadness")} src="/popper.min.js" />
{children}
<Footer/>
</>
)
};
export default Layout;
To me, it looks that the strategy of adding it in the html.js collides with the postBodyComponents (or any other onRenderBody parameters) and with the rehydration of the custom html.js
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<Div id="asdfg"></Div>
</body>
<script type="text/babel">
function Dalo()
{ return (
<h1>bhj</h1>
)
}
function Panch ()
{
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
}
ReactDOM.render( <Panch/> , document.getElementById("asdfg") );
</script>
</html>
Here nothing is being rendered after calling function Panch.
The parenthesis after the return must be on the same line as the return itself. So change this:
return
( <React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
to
return (
<React.Fragment>
<Dalo/><Dalo/><Dalo/><Dalo/><Dalo/><Dalo/>
</React.Fragment>
)
is there a way to prevent dropdown menu from react bootstrap to close when selecting an item? I created this component which I use multiple times in my project, but when props.name is trans('Tło') I need to keep dropdown menu open on select, how can I achive this?
export const DropdownList = ({
name,
currentValue,
items,
action,
displayValue = (i, className) => <span className={className}>{i.name.pl}</span>,
getItemId = i => i.id,
getKey = i => `${name}-${i.id || i}`,
displayCurrentValue = displayValue,
}) => {
const handleAction = i => {
if (name !== trans('Tło')) {
action(i);
}
};
return (
<Dropdown>
<Dropdown.Toggle variant="none" className={`w-100 ${styles.toggle}`}>
<div className="row mx-auto d-flex flex-nowrap">
<div className="col px-0 d-flex flex-column align-items-baseline">
<div style={{ fontSize: '12px', color: '#878787' }}>{name}</div>
<div className={`${styles.item} font-weight-bold text-left`}>
{currentValue ? displayCurrentValue(currentValue, 'w-50') : trans('Wybierz')}
</div>
</div>
<div className="col-auto px-0 d-flex align-items-center">
<img src={arrowDownIcon} alt="" style={{ width: '12px' }} />
</div>
</div>
</Dropdown.Toggle>
<Dropdown.Menu align="left" style={{ minWidth: '100%' }}>
{items.map(i => (
<div
key={getKey(i)}
className={currentValue && getItemId(currentValue) === getItemId(i) ? styles.active : ''}
>
<Dropdown.Item
onSelect={e => handleAction(i)}
className={`current-item ${name === trans('Tło') && styles.noHover}`}
>
{displayValue(i, 'w-100')}
</Dropdown.Item>
</div>
))}
</Dropdown.Menu>
</Dropdown>
);
};
You can control the state of whether or not the dropdown is open using the show prop:
const { Dropdown } = ReactBootstrap;
const { useState } = React;
function App() {
const [show, setShow] = useState(false);
return (
<Dropdown
show={show}
onToggle={(isOpen, event, metadata) => {
if (metadata.source !== "select") {
setShow(isOpen);
}
}}
>
<Dropdown.Toggle>foo</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onSelect={() => setShow(false)}>bar</Dropdown.Item>
<Dropdown.Item>baz</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<!-- react -->
<script
crossorigin
src="https://unpkg.com/react#17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"
></script>
<!-- react-bootstrap -->
<script
crossorigin
src="https://unpkg.com/react-bootstrap#1.6.3/dist/react-bootstrap.min.js"
></script>
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<div id="root"></div>
In the above example:
When bar is selected, show is set to false and the dropdown closes.
When baz is selected, we do not change show, and so the dropdown does not close.
When the dropdown is toggled for any reason other than a selection was made, we set show to whatever the component wanted to toggle to. This allows the dropdown to open and close normally.
this is the error i'm getting in my react application. please help me fix this. I've extended the code for better understanding. Have any idea what's the problem
const TextEditor = (value, props) => {
console.log(props.value)
console.log(props.value.length)
const renderElement = useCallback(props => <Element {...props} />, [])
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
update-as told, I've added the code where i pass my values.
I've used value= {value.document} where I've initialised document in the initialValues below
const TextEditor = (value, props) => {
console.log(props.value)
console.log(props.value.length)
const renderElement = useCallback(props => <Element {...props} />, [])
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
const [isPreviewModalOpen, setPreviewModal] = useState(false);
const initialValues= {
title:value.title,
document: value.document,
}
return (
<>
<div className="text-center pt-3">
<h2 style={{color: "#3D44C8", fontWeight: "bold"}}>Ask an expert</h2>
<p style={{color: "#DB262F", fontWeight: "bold", fontSize: "18px"}}>Get your questions solved within 24 hours!</p>
</div>
<Slate editor={editor} value={props.value} onChange={value => {
props.setValue(value);}} >
<div className="textEditor_toolbar">
<div className="textEditor_buttonedit">
<Navbar style={{padding: "0"}} expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Navbar.Brand>
<ButtonGroup>
<MarkButton format="bold" tooltip="bold" icon={faBold}/>
<MarkButton format="italic" icon={faItalic} />
<MarkButton format="underline" icon={faUnderline} />
</ButtonGroup>
<ButtonGroup>
<MarkButton2 format="code" icon={faCode}/>
<BlockButton format="bulleted-list" icon={faListUl} />
<BlockButton format="numbered-list" icon={faListOl} />
</ButtonGroup>
</Navbar.Brand>
<Nav>
<label className="custom-file-upload">
<input
type="file"
name="profileImg"
accept="image/png, image/jpeg"
multiple="false"
onChange={setImage}
/>
<FontAwesomeIcon className="custom-file-icon" icon={faPaperclip}/>
</label>
</Nav>
<Form>
<Choice />
</Form>
</Navbar.Collapse>
</Navbar>
</div>
</div>
<div>
</div>
<Editable
className="textEditorMain"
renderElement={renderElement}
renderLeaf={renderLeaf}
value={value.document}
placeholder="Type your Question, Paste your Question text or Attach images or PDF here"
spellCheck
autoFocus
useReadOnly
onPaste = {onPaste}
onKeyPress={event => {
for (const hotkey in HOTKEYS) {
if (isHotkey(hotkey, event )) {
event.preventDefault()
const mark = HOTKEYS[hotkey]
toggleMark(editor, mark)
}
}
}}
/>
</Slate>
props.value is undefined, make sure you are correctly passing your props
I a creating a React App that keeps Score but so far my components are not showing up in the browser could anyone help? The Scoreboard should have a score counter so far and player name but so far nothing is appearing I am new to react.
I have tried linking babel in the HTML and This is the React Code
const Header = () =>
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>;
const Player = () => {
return(
<div className="player">
<span classNae="player-name">
Guil
</span>
<Counter />
</div>
);
}
const counter = () => {
return(
<div className="counter">
<button className="counter-decriiment">-</button>
<span className="counter-score"></span>
<button className="counter-incriment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/>
{/* { Players List } */}
<PLayer />
</div>
);
}
ReactDom.render(
<App />,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>
You are missing an element which has to have a root id to be render on.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="./app.js"></script> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="app.js"></script>
</body>
</html>
const Header = () => {
return(
<header>
<h1>ScoreBoard</h1>
<span className="stats">Player: 1 </span>
</header>
);
}
const Player = () => {
return( <div className="player">
<span className="player-name"> Guil </span><Counter />
</div>
);
}
const Counter = () => {
return( <div className="counter">
<button className="counter-decrement">-</button>
<span className="counter-score"></span>
<button className="counter-increment">+</button>
</div>
);
}
const App = () =>{
return(
<div className="scoreboard">
<Header/> { } <Player /> </div> ); }
ReactDOM.render( <App />, document.getElementById('root') );