can someone explain to me why the following code is executed twice? (See image)
import * as React from 'react';
import Container from '#mui/material/Container';
import Typography from '#mui/material/Typography';
import Box from '#mui/material/Box';
import raw from "./testfile.csv";
function ReadFile(file) {
fetch(raw)
.then(r => r.text())
.then(text => {
console.log('text decoded:', text);
});
}
export default function App() {
return (
<Container maxWidth="sm">
<Box sx={{ my: 4 }}>
<Typography variant="h4" component="h1" gutterBottom>
Create React App example
</Typography>
<ReadFile />
</Box>
</Container>
);
}
executed twice
I don't understand why the code is executed 2x by the browser
Do you have <React.StrictMode> in index.js? It already happened to me that my code executed twice because of that.
Related
When I remove cssBaseLine this error goes away but another error comes up.
With cssBaseLine, I get
TypeError: Cannot read properties of undefined (reading 'primary')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
body
file:///node_modules/#mui/material/CssBaseline/CssBaseline.js (43:45)
Here is layout.jsx
import CssBaseline from '#mui/material/CssBaseline';
import { ThemeProvider, StyledEngineProvider } from '#mui/material/styles';
import {lightTheme, darkTheme} from '../components/theme';
import TopAppBar from './ui/topAppBar';
import { useCookies } from 'react-cookie';
import Copyright from '../components/ui/copyright';
import Box from '#mui/material/Box';
const layout = ({ children }) => {
const [cookies, setCookie] = useCookies(['darkTheme']);
return <>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={cookies.darkTheme=="true" ? darkTheme : lightTheme}>
<CssBaseline />
<header>
<nav>
<TopAppBar />
</nav>
</header>
<main>{children}</main>
<Box mt={8} mb={4}>
<Copyright />
</Box>
</ThemeProvider>
</StyledEngineProvider>
</>;
};
export default layout;
I am using MobileDateRangePicker from "#material-ui/lab/MobileDateRangePicker". I am trying to customize it according to my needs. What I am looking for is
When the MobileDateRangePicker opens I need text input view to show first and after that when I click on calendar icon calendar view needs to come. But right now complete opposite is happening. How can I get my requirement.
This is the complete code. Any assistance would be really helpful to me. Thank you.
import * as React from "react";
import TextField from "#material-ui/core/TextField";
import AdapterDateFns from "#material-ui/lab/AdapterDateFns";
import LocalizationProvider from "#material-ui/lab/LocalizationProvider";
import Box from "#material-ui/core/Box";
import Stack from "#material-ui/core/Stack";
import MobileDateRangePicker from "#material-ui/lab/MobileDateRangePicker";
import { Button } from "#material-ui/core";
export default function ResponsiveDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
const [openPicker, setOPenPicker] = React.useState(false);
const handleClick = () => {
setOPenPicker(!openPicker);
};
return (
<div>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<MobileDateRangePicker
startText="Start date"
endText="End date"
disableMaskedInput={true}
// open={openPicker}
// disableOpenPicker={true}
showDaysOutsideCurrentMonth={true}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
toolbarTitle="custom date range"
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</Stack>
</LocalizationProvider>
</div>
);
}
sandbox link: https://codesandbox.io/s/responsivedaterangepicker-material-demo-forked-8qws4?file=/demo.js
I am trying to update my react native app to fetch data from the backend every few seconds. Below is my code where I want the data in the transaction history table to update automatically. What is the best way to do this?
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, ActivityIndicator, Text, FlatList } from 'react-native';
import TransactionShape from '../../data/model-shapes/Transaction';
import TransactionListItem from '../../components/wallets/TransactionListItem';
import CardStyles from '../../utils/styling/Cards';
import Colors from '../../utils/styling/Colors';
const keyExtractor = ({ id }) => id;
function renderTransactionItem({ item: transaction }) {
return <TransactionListItem transaction={transaction} />;
}
const TransactionHistorySection = ({ transactions, isFetching }) => {
return (
<View style={CardStyles.sectionCard}>
{isFetching ? (
<ActivityIndicator size="large" />
) : (
<View>
<Text style={styles.sectionHeading}>Transaction History</Text>
{transactions.length ? (
<FlatList
data={transactions}
keyExtractor={keyExtractor}
renderItem={renderTransactionItem}
/>
) : (
<Text style={styles.growContainer}>No Transactions</Text>
)}
</View>
)}
</View>
);
};
You coud use a setInterval(function(){ fetch_something }, 3000);
function to run the function to fetch your data on interval you want. then whenever the data change your flatlist will shown the new data
I have a React app in Ionic 5 and I want to add some custom SVGs to it.
This SO question is about Angular, but my question is about React.
My app folder structure looks like this:
src
assets
listen.svg
SvgListen.tsx
Here is SvgListen.tsx:
import React from 'react';
import { ReactComponent as ListenSvg } from './listen.svg';
import { IonIcon } from '#ionic/react';
const SvgListen = () => (
<>
<ListenSvg />
<IonIcon src="./listen.svg" font-size="48px" />
</>
);
export default SvgListen;
When testing the app in Chrome, I get this HTML:
<ion-icon src="./listen.svg" font-size="48px" role="img" class="ios hydrated"></ion-icon>
The <ListenSvg /> that I imported is displayed correctly; however, the ion-icon is not displayed. There is no error message, either.
I checked this blog post, but no luck with the approach outlined there, either.
How can I show a custom SVG using <IonIcon> in Ionic 5?
According do the Create React App docs you can import images to get their final path in the output bundle:
import React from 'react';
import { IonIcon } from '#ionic/react';
import listenSvg from './listen.svg';
const SvgListen = () => (
<IonIcon src={listenSvg} font-size="48px" />
);
export default SvgListen;
I know that with an InputField one is able to pass down the variant="filled" prop to get input box filled. However, is it also possible to pass down a prop with the similar effect using a Material UI date picker (not using the native datepicker from the browser)?
Example of filled input:
I think you are looking for inputVariant={"filled"} prop
import "date-fns";
import React from "react";
import Grid from "#material-ui/core/Grid";
import DateFnsUtils from "#date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardTimePicker,
KeyboardDatePicker
} from "#material-ui/pickers";
export default function MaterialUIPickers() {
// The first commit of Material-UI
const [selectedDate, setSelectedDate] = React.useState(
new Date("2014-08-18T21:11:54")
);
const handleDateChange = date => {
setSelectedDate(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<KeyboardDatePicker
inputVariant={"filled"}
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date"
}}
/>
</Grid>
</MuiPickersUtilsProvider>
);
}
Working sandbox project link
The #material-ui/pickers has been moved to the #mui/lab.
Checkout the migration guide Here !
Below is a sample code to implement the same
import React from "react";
import TextField from "#mui/material/TextField";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
import DatePicker from "#mui/lab/DatePicker";
export default function filledDatePicker() {
const [selectedDate, setSelectedDate] = React.useState(new Date());
const handleDateChange = date => {
setSelectedDate(date);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={selectedDate}
onChange={handleDateChange}
renderInput={(props) => (
<TextField {...props} variant="filled" label="Select Date" />
)}
/>
</LocalizationProvider>
);
}