I am trying to replicate TextField example from material-ui this is how is suppose to be
This is how should be
but i got this
[marks in red is to show extra line that all TextFiel has2
do you know the reasons?
Please write a component like TextFieldExample and use this in app Component.
import React from 'react';
import TextField from '#material-ui/core/TextField';
export default function TextFieldExample(props) {
return (
<TextField id="standard-basic" label={props.label} variant={props.variant} />
);
}
Here is the App Component Code that includes how you can use TextFieldExample Component. Here you can pass label and variant as an props and use it in TextFieldExample Component
import React from "react";
import ReactDOM from 'react-dom'
import TextFieldExample from "./TextFieldExample";
class App extends React.Component {
render() {
return (
<div>
<TextFieldExample label="Standard"/>
<TextFieldExample label="Filled" variant="filled" />
<TextFieldExample label="Outlined" variant="outlined" />
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
export default App;
I include the output image for your understanding.
Related
Hi I'm creating a Teams App and im having trouble implementing a DatePicker in one of my screen.
My basic test screen:
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState("");
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
the tab component:
import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "#fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "#microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";
export default function App() {
const { theme } = useTeams({})[0];
return (
<Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
<Router>
<TestScreen />
</Router>
</Provider>
);
}
[The error I get][1]
[1]: https://i.stack.imgur.com/Sc7cX.png
For those wondering, I fixed my issue replacing the by a simple . Not the solution i wanted to use at first but at least it's working fine. Might be a compatibility issue between Teams toolkit, React and some packages..
I see you haven't imported useState in your file. Also add current date as the default value of the selectedDate state. Try this
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState(new Date());
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
In case you're still not able to use it check if you're using an older version of react. Since hooks are supported in React 16.8.0 or higher.
I am a beginner learning React and have been trying to create two TextField's with MUI where I have two strings in the state to store the subject and number both as strings. I want to use one function to change the state of either the subject or number based on which TextField is changed. I created a custom attribute called data-id in each TextField and called console.log(event.target.dataset.id); within my handleSearchChange(event){...} function. For some reason each time I type a value into either TextField it just says undefined in the console.
Some resources I have tried
https://reactjs.org/docs/events.html
https://www.pluralsight.com/guides/how-to-access-custom-attributes-from-aevent-object-in-react
https://www.codegrepper.com/code-examples/javascript/react+get+data+attribute+from+element
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { TextField } from '#mui/material';
class ClassSearch extends React.Component {
constructor(props) {
super(props);
this.handleSearchChange = this.handleSearchChange.bind(this);
};
handleSearchChange(event){
console.log(event.target.dataset.id);
}
render() {
return(
<div>
<h1>Classes Search</h1>
<TextField
onChange={this.handleSearchChange}
data-id = "subject"
type = "search"
id="outlined-basic"
variant="outlined"
/>
<TextField
onChange={this.handleSearchChange}
data-id = "number"
type = "search"
id="outlined-basic"
variant="outlined"
defaultValue={this.state.number}
/>
</div>
);
}
}
ReactDOM.render(
<React.StrictMode>
<ClassSearch />
</React.StrictMode>,
document.getElementById('root')
);
I am simply trying to create a input group with:
Description | text | button
But when I add the button the alignment goes crazy. I simply copied from the React Bootstrap documentation: https://react-bootstrap.github.io/components/input-group/.
This is my code:
import React, {useContext} from "react";
import Header from "../../layout/Header";
import UserContext from "../../../context/UserContext";
import "./Profile.css";
import {InputGroup, FormControl, Button} from 'react-bootstrap'
export default function Profile() {
const { userData } = useContext(UserContext);
console.log(userData.user)
return (
<>
<Header/>
<div className="ProfilePage">
<h1>Profile Settings</h1>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text>Display name</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Recipient's username"
/>
<InputGroup.Append>
<Button variant="outline-secondary">Button</Button>
</InputGroup.Append>
</InputGroup>
</div>
</>
);
}
This is the result:
There is no much information or provided example that I could inspect but try removing your "import "./Profile.css";" or some other CSS import that you possibly have that it's causing this issue.
I'm just starting with Material UI. Thanks for bearing with me.
I know you can use things like <Box mx={2}> out-of-the-box (ha). So if I wanted to put a margin around, say, a TextField, I could wrap it in a box.
Is there a simple way to set up my app's theme so that any component can use those style function props? (m, p, display, etc)
So that I could to <TextField mx={2}/> without having to wrap it in a Box.
The docs imply that you can do this:
(the example uses ThemeProvider from styled-components but I'm assuming that MUI's ThemeProvider works the same way???)
import React from 'react'
import { ThemeProvider } from 'styled-components'
const theme = {
spacing: 4,
palette: {
primary: '#007bff',
},
};
export default function App() {
return (
<ThemeProvider theme={theme}>
{/* children */}
</ThemeProvider>
)
}
I've tried this but it crashes from the TextField's my prop:
import { createMuiTheme, TextField, ThemeProvider } from '#material-ui/core';
// Greatly simplified version of my component
const App = () => <TextField my={2}/>
let theme = createMuiTheme({})
export default () =>
<ThemeProvider theme={ theme }>
<App/>
</ThemeProvider>;
I can do something like this and it works:
function App() {
const Input = styled(TextField)(compose(spacing))
return <Input my={3}/>
}
But then I'd have to compose my components every time I want to do use the style functions.
The docs are showing how the theme can parameterize the Box features (e.g. such that a spacing unit is 4px instead of 8px) -- the theme doesn't do anything to enable those features.
Material-UI is intending to support #material-ui/system features on core components in v5, but that is still months away.
Your main options are doing something like you showed in your example (though you should move const Input = styled(TextField)(compose(spacing)) to the top-level rather than doing this within render of App). You could put this in a separate file and import this component instead of TextField whenever you want to use those features. For instance:
MyTextField.js
import TextField from "#material-ui/core/TextField";
import { styled } from "#material-ui/core/styles";
import { compose, spacing } from "#material-ui/system";
export default styled(TextField)(compose(spacing));
App.js
import React from "react";
import TextField from "./MyTextField";
export default function App() {
return (
<div className="App">
<TextField variant="outlined" label="Material-UI system demo" />
</div>
);
}
Another option is to use Box with the clone prop and wrap the component you want to style. For instance:
import React from "react";
import TextField from "#material-ui/core/TextField";
import Box from "#material-ui/core/Box";
export default function App() {
return (
<div className="App">
<Box my={3} clone>
<TextField variant="outlined" label="Box demo" />
</Box>
</div>
);
}
You can also use the component prop of Box:
import React from "react";
import TextField from "#material-ui/core/TextField";
import Box from "#material-ui/core/Box";
export default function App() {
return (
<div className="App">
<Box my={3} component={TextField} variant="outlined" label="Box demo" />
</div>
);
}
Related answers:
Material-UI Grid does not hide whe use Display
Dynamic icon size in Material-UI
Box vs className vs style for vertical spacing in Material UI
Reusable component using theme-based Box features
Using Material-UI Box Component with the Drawer Compoment
How to use override Button using Box component in Material-UI?
I'm fairly new to React and trying to create an App that when you search in the input box it filters out the wrong drivers and only presents you with the correct one. I'm trying to use hooks instead of class components. I have a working project in CodeSandBox: https://codesandbox.io/s/hungry-turing-2n2tj
I've looked at some other answers on stack overflow as well as reading the docs that the React Team has but it is all going above my head. Let me know if there is any more documentation that I can provide! Thanks in advance!
You are looking for something like this: https://codesandbox.io/s/distracted-frog-d5ocw
Basically pass the drivers to the list from the app component and filter it out based on the search term provided by the searchbox component
Your App.js:
import React from "react";
import "./styles.css";
import CardList from "./card-list";
import SearchBox from "./searchbox";
import allDrivers from "./drivers";
export default function App() {
const [drivers, setDrivers] = React.useState(allDrivers);
return (
<div className="App">
<h1>F1 Drivers</h1>
<SearchBox
onSearch={v => {
console.log(v);
if (!v) {
setDrivers(allDrivers);
return;
}
setDrivers(drivers.filter(d => d.name.toLowerCase().startsWith(v)));
}}
/>
<CardList drivers={drivers} />
</div>
);
}
your cardlist would look like
import React from "react";
import Card from "./Card";
function CardList(props) {
return (
<div className="card-list">
{props.drivers.map(createCard => (
<Card
key={createCard.id}
name={createCard.name}
imgURL={createCard.imgURL}
number={createCard.number}
team={createCard.team}
age={createCard.yearsOld.age}
country={createCard.country}
/>
))}
</div>
);
}
export default CardList;
and searchbox is simply
import React from "react";
import "./drivers";
function SearchBox(props) {
return (
<input
onChange={e => {
props.onSearch(e.target.value);
}}
type="text"
// value={props.value}
/>
);
}
export default SearchBox;