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.
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 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.
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;
I want to display text in the form of react component inside react app.
When I tried to render it, it gives me not defined error, which is understandable.
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Not sure exactly what you are trying to do?
But if i understand correct you could do like this:
In the text file:
import React, { Fragment } from 'react'; // So it doesn't create a unnecessary node element. **Only available in react 16+
export const Text = () => <Fragment>Your text here</Fragment>;
and then you can bring in the text element and use it in your code:
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
import { Text } from './Text'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <Text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Maybe i have misunderstood the question but i don't know why you would want to do this.
I'm new to JavaScript and ReactJS.
What do I want to get
I want to create a page with the following layout:
.
As you can see, both forms have a border around them. That's what I want to
achieve (add a border to the sign-up form).
What I did to acheive the result
I created a simple NodeJS/React application according to this tutorial.
Then I defined the entry page (page that will contain both forms) like this:
import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignUpForm from './SignUpForm';
class EntryPage extends Component {
render() {
return (
<div>
<Jumbotron>
<h1>CTR Predictor</h1>
<p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p>
</Jumbotron>
<Row>
<Col xs={6} md={3}><SignUpForm /></Col>
<Col xs={6} md={6}>Place for the login form</Col>
</Row>
</div>
)
}
}
export default EntryPage;
SignUpForm is defined as follows.
import React, { Component } from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import style from './style';
class SignUpForm extends Component {
render() {
return (
<div class="signUpForm">
<form>
<FormGroup
controlId="formBasicText"
>
<ControlLabel>Working example with validation</ControlLabel>
<FormControl
type="text"
placeholder="Enter text"
onChange={this.handleChange}
/>
<FormControl.Feedback />
<HelpBlock>Validation is based on string length.</HelpBlock>
</FormGroup>
</form>
</div>
)
}
}
export default SignUpForm;
style.js is located in the same directory as the files above and contains this:
const style = {
signUpForm: {
border:'2px solid #000000',
}
}
module.exports = style;
When I run the application, there is no border around the sign-up form.
What I tried to fix the error
I tried to add bsClass='signUpForm' (as suggested here) to the declaration of FormGroup in
SignUpForm, but it didn't help.
How can I fix this error (make sure that the border around the form is displayed)?
First I would change import of style, to this import {signUpForm} from ./style and this
<div class="signUpForm">
change to this
<div style={signUpForm}>
However important note, you are using react, therefore you cannot write class, react use className="name-of-class"
You are exporting style, not css, therefore you need to use it in style attribute not in className.