I have a login component in my cra app, and my state is showing up in my url, both in dev and production. I've replaced the email with {email}.
http://localhost:3000/?user={email}&password=password
I have no clue why this is happening. I have several other components, none of which exhibit the same behavior. I've also confirmed this is coming from the react component and not any of the route handling (I renamed the state and the url changed in kind).
How do I fix this?
import React from 'react';
import '../../App.css';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import LoginButton from './LoginButton';
class Card extends React.Component {
constructor(props) {
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
state = {
user: "",
password: ""
};
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
onSubmit(){
this.props.login(this.state.user, this.state.password);
}
render(){
return (
<div style={styles.container}>
<form style={styles.form}>
<div style={styles.formContainer}>
<div style={styles.block}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<i class="fas fa-user-circle" style={styles.iconPosition}></i>
<div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
<div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
EMAIL
</div>
<input
type="text"
name="user"
value={this.state.user}
onChange={this.handleInputChange}
placeholder='john.snow#solidcad.ca'
style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
/>
</div>
</div>
</div>
<div style={styles.block}>
<div style={{display: 'flex', flexDirection: 'row'}}>
<i class="fas fa-unlock-alt" style={styles.iconPosition}></i>
<div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
<div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
PASSWORD
</div>
<input
type="password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
placeholder='*****'
style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
/>
</div>
</div>
</div>
<LoginButton label='LOGIN' onClick={this.onSubmit}/>
</div>
</form>
</div>
);
}
}
export default connect(null, actions)(Card);
This is the app component that contains the login screen and the login:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import './App.css';
import Configurator from './components/Configurator';
import LoginScreen from './components/Login/LoginScreen';
import * as actions from './actions';
const Dashboard = () => <h2>Dashboard</h2>
class App extends Component {
componentDidMount(){
this.props.fetchUser();
}
renderContent() {
switch (this.props.auth) {
case null:
return <LoginScreen />;
default:
return (
<BrowserRouter>
<Route exact path="/" component={Configurator}/>
{/* <Route path="/dashboard/" component={Dashboard}/> */}
</BrowserRouter>
)
}
}
render() {
return (
<div className="App" style={styles.container}>
{this.renderContent()}
</div>
);
};
}
function mapStateToProps({ auth, desAut }) {
return { auth, desAut };
}
export default connect(mapStateToProps, actions)(App);
Thanks in advance for the help!
preventDefault is what you're looking for, you can change the button type to submit in the LoginButton component like this <input type="submit" value="Login"/> and then
<form
style={styles.form}
onSubmit={(e) => {
e.preventDefault();
this.onSubmit();
}}
>
You have to provide an onSubmit handler on your form like this:
<form onSubmit={(event) => {
event.preventDefault();
...process form data...
}>
...
</form>
Related
Hello Everyone i have the exact same problem with this one. but the question has no answer yet
im stuck with this all day there is no answer to found i am using the latest react native and latest react navigation package
React navigation focus on input blurs immediately
so this is my form page where at the first load blurs text input when i click the text box
import React, { Component } from 'react'
import { View, Dimensions } from 'react-native'
import {
Container,
Content,
Button,
Text,
Form,
Item,
Input,
Label,
Textarea
} from 'native-base';
import Ion from 'react-native-vector-icons/Ionicons'
class Compose extends Component{
render(){
return(
<Container>
<Content>
<Form style={{ padding: 10 }}>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="ios-person" size={25} style={{ marginRight: 12 }}/>
<Label>Product Name*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/>
<Label>Price*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/>
<Label>Drop rate*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/>
<Label>Contact number*</Label>
<Input
/>
</Item>
<Textarea
rowSpan={5} bordered
placeholder="Description"
style={{ marginBottom: 15 }}
/>
<Button block success style={{ height: 60, marginBottom: 14 }}>
<Ion name="md-images" size={25} style={{ color: 'white' }}/>
<Text style={{ fontSize: 20 }}>Upload Photos</Text>
</Button>
<Button block danger>
<Ion name="ios-cellular" size={25} style={{ color: 'white' }}/>
<Text>Broadcast</Text>
</Button>
</Form>
</Content>
</Container>
)
}
}
export default Compose
and here is my navigation component
import React, { Component } from 'react';
import { Text } from 'react-native'
//Navigation
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, TransitionPresets } from '#react-navigation/stack';
//Screens
import { Welcome, Compose } from './src/index'
import {
Header,
Left,
Button,
Icon,
Body,
Title,
Right
}
from 'native-base'
const Stack = createStackNavigator();
const AppbarList = {
welcome: function(navigation){
return null
},
compose: function(navigation){
return (
<Header>
<Left>
<Button transparent rounded>
<Icon name='arrow-back' onPress={()=>{ navigation.goBack() }}/>
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right />
</Header>
)
}
}
const Appbar = ( scene, navigation )=> {
const { options } = scene.descriptor;
const title = scene.route.name;
return AppbarList[title.toLowerCase()](navigation)
}
class App extends Component{
render(){
return(
<NavigationContainer>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({ navigation, scene, previous }) => Appbar( scene, navigation )
}}
>
<Stack.Screen
name="Welcome" component={Welcome}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="Compose" component={Compose}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default App;
I faced the same problem. Try to disable gestures for Android.
export default () => {
const isAndroidPlatform = isAndroid();
return {
mode: 'modal',
headerMode: 'none',
defaultNavigationOptions: {
gestureEnabled: !isAndroidPlatform,
cardOverlayEnabled: true,
...(
isAndroidPlatform
? TransitionPresets.FadeFromBottomAndroid
: TransitionPresets.ModalPresentationIOS
),
},
};
};
I'm a beginner in React. So I have 2 components - Login and Banner
**Login.js**
import React from 'react';
function login(){
return(
<div>
<b>Welcome back</b>
<p>Sign in to continue</p>
<div >
<input type = "text" placeholder="Email address" />
</div>
<div>
<input type="text" placeholder="Password"/>
</div>
<h6>Forgot your password?</h6>
<div>
<button>Log In</button>
</div>
<p>Don't have an account?<b> Sign Up instead</b></p>
</div>
)
}
export default login
**Banner.js**
import React from 'react';
import pic from './Banner.png';
function Banner(){
return(
<div >
<img src = {pic} />
</div>
)
}
export default Banner
So what I'm trying to do is display both the components when in desktop dimensions and display only the Login component when in mobile dimensions. I can't figure out how to go about it. When I go to mobile dimensions, the Login components moves on top of the banner as opposed to only showing Login.
Please check this example. Hope it helps you.
import React from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '#material-ui/core/styles';
import Hidden from '#material-ui/core/Hidden';
import withWidth from '#material-ui/core/withWidth';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
container: {
display: 'flex',
flexWrap: 'wrap',
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
flex: '1 0 auto',
margin: theme.spacing(1),
},
}));
function ResponsiveExample(props) {
const classes = useStyles();
const {width} = props;
return (
<div className={classes.root}>
<Hidden mdDown>
<div className={classes.container}
style={{backgroundColor: '#499DF5', color: 'white', padding: '20px'}}>
<Banner/>
</div>
<div style={{backgroundColor: 'whitesmoke', color: 'green', padding: '20px'}}>
<Login/>
</div>
</Hidden>
<Hidden smUp>
<div style={{backgroundColor: 'whitesmoke', color: 'green', padding: '20px'}}>
<Login/>
</div>
</Hidden>
</div>
);
}
ResponsiveExample.propTypes = {
width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
};
export default withWidth()(ResponsiveExample);
function Banner() {
return (
<div>
<h1>This is Banner</h1>
</div>
)
}
function Login() {
return (
<div className='container'>
<div className='row'>
<div className='col-4'>
<form>
<div className="form-group">
<label htmlFor="username">Username</label>
<input type="text" name='username'
className="form-control" id="username"/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="text" name='password' className="form-control" id="password"/>
</div>
<button type="submit" className="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
)
}
I have problem with my app. In my header i have Twitter, Youtube, Instgram which is if i click one of them it will show the page from the component. Example if i click instagram it will load Instagram Component and change the page to Instagram. But in my app, after i click one of them the pages not changes and not load the component but the url changes. This is my code :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Row, Col, Card, Layout, Spin } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import cubejs from "#cubejs-client/core";
import { QueryRenderer } from "#cubejs-client/react";
import { Line, Bar, Pie } from "react-chartjs-2";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Facebook from "./Facebook";
import Youtube from "./Youtube";
import Instagram from "./Instagram";
import Twitter from "./Twitter";
import moment from "moment";
const AppLayout = ({ children }) => (
<Layout>
<Layout.Header>
<div
style={{
float: "left"
}}
>
<h2
style={{
color: "#fff",
margin: 0
}}
>
NARASIDATA
</h2>
</div>
<Router>
<div
style={{
float: "right"
}}
>
<Link to="/facebook/" component={Facebook}>
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Facebook
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/instagram/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Instagram
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/youtube/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Youtube
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/twitter/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Twitter
</h2>
</Link>
</div>
</Router>
</Layout.Header>
<Layout.Content
style={{
padding: "0 25px 25px 25px",
margin: "25px"
}}
>
{children}
</Layout.Content>
</Layout>
);
const Dashboard = ({ children }) => (
<Row type="flex" justify="space-around" align="top" gutter={24}>
{children}
</Row>
);
const DashboardItem = ({ children, title }) => (
<Col span={24} lg={12}>
<Card
title={title}
style={{
marginBottom: "24px"
}}
>
{children}
</Card>
</Col>
);
const COLORS_SERIES = ["#FF6492", "#141446", "#7A77FF"];
const lineRender = ({ resultSet }) => {
const data = {
labels: resultSet.categories().map(c => c.category),
datasets: resultSet.series().map((s, index) => ({
label: s.title,
data: s.series.map(r => r.value),
borderColor: COLORS_SERIES[index],
fill: false
}))
};
const options = {};
return <Line data={data} options={options} />;
};
const API_URL = "http://localhost:4000";
const cubejsApi = cubejs(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NjI4MjQ2NjYsImV4cCI6MTU2MjkxMTA2Nn0.h9s4qtiFSia8vHqtyYNwkJDihh-_NcCD57wozOmmz4k",
{
apiUrl: API_URL + "/cubejs-api/v1"
}
);
const renderChart = Component => ({ resultSet, error }) =>
(resultSet && <Component resultSet={resultSet} />) ||
(error && error.toString()) || <Spin />;
function App() {
return (
<div className="App">
<AppLayout>
<Dashboard>
<DashboardItem>
<Router>
<Route exact path="/twitter/" component={Twitter} />
<Route exact path="/youtube/" component={Youtube} />
<Route exact path="/instagram/" component={Instagram} />
<Route exact path="/facebook/" component={Facebook} />
</Router>
<QueryRenderer
query={{
measures: ["Twitter.retweetcount"],
timeDimensions: [
{
dimension: "Twitter.publishat",
granularity: "day",
dateRange: "This month"
}
],
filters: [
{
dimension: "Twitter.username",
operator: "equals",
values: ["narasitv"]
}
]
}}
cubejsApi={cubejsApi}
render={renderChart(lineRender)}
/>
</DashboardItem>
</Dashboard>
</AppLayout>
</div>
);
}
export default App;
What's the problem in my app?
I am new in react.
You should only have one <Router /> so remove the one around your links in AppLayout and wrap your whole App render in <Router /> like this:
<Router>
<AppLayout>
<Route />
<Route />
// ...
</AppLayout>
</Router>
Also you should replace Router by a BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter
what I want is to change the background color of the chip depending on whether user admin or not, a different color for each user, in the list of comments, so that the end user can define who is the admin and who is not.
this is my code
import React from 'react';
import TimeAgo from 'react-timeago';
import PropTypes from 'prop-types';
import Card from 'components/commons/Card';
import Chip from '#material-ui/core/Chip';
import Button from '#material-ui/core/Button';
import { Grid } from '#material-ui/core';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { getComments } from 'api'
const styles = {
root: {
paddingTop: '25px',
color: '#FFFFFF'
},
chipA: {
color: 'white',
fontWeight: 'bold',
backgroundColor: '#00a6ff',
textTransform: 'uppercase',
fontSize: '1rem',
letterSpacing: '0px',
textAlign: 'center'
},
chipB: {
color: 'primary',
fontWeight: 'bold',
backgroundColor: '#ff8400',
textTransform: 'uppercase',
fontSize: '1rem',
letterSpacing: '0px',
textAlign: 'center'
},
Button: {
fontWeight: 'bold',
fontSize: '1rem',
letterSpacing: '0px',
textTransform: 'uppercase',
borderRadius: '2.5px',
textAlign: 'center',
},
};
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
comment: '',
isAdmin: [],
};
}
componentDidMount() {
console.log(this.props.isAdmin)
if (this.props.isAdmin) {
console.log('Admin User');
}else {
console.log('Normal User');
}
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
}
renderComments(comments) {
const condition = this.props.isAdmin;
console.log(condition);
const commentDivs = comments.map(user => {
return (
<div key={user.id}>
<div className="row">
<div className="col comment">{user.description}</div>
</div>
<div className="row">
<div className="col-9">
<TimeAgo className="time-ago" date={user.createdAt} />
</div>
<div className="col-3">
<div style={styles.wrapper}>
<span className="time-ago">
<Chip
label={user['user.firstname'] + ' ' + user['user.lastname']}
style={{ backgroundColor: condition ? "#00a6ff" : "#ff8400" , color: 'white', fontWeight: 'bold',
textTransform: 'uppercase',
fontSize: '1rem',
letterSpacing: '0px',
textAlign: 'center'}}
/>
</span>
</div>
</div>
</div>
<hr />
</div>
)
});
return (
<div>{commentDivs}</div>
);
}
render() {
return (
<Card title="comments">
<Grid item xs={12} md={12}>
{this.renderComments(this.props.comments)}
<div className="form-group">
<textarea
className="form-control"
name="comment"
placeholder="Write a comment"
onChange={this.onChange}
value={this.state.comment}
rows="3"
></textarea>
</div>
<div className="form-group">
<Button
onClick={() => this.props.onSubmit(this.state.comment)}
color="primary"
variant="contained"
size="large"
style={styles.Button}>
Send
</Button>
</div>
</Grid>
</Card>
);
}
}
Comment.propTypes = {
comments: PropTypes.array.isRequired,
onSubmit: PropTypes.func.isRequired,
isAdmin: PropTypes.bool,
};
const mapStateToProps = state => {
return {
isAdmin: state.auth.isAdmin,
};
};
export default withRouter(connect(mapStateToProps, {
})(Comment)) ;
what I define is that I change the color depends on who is registered, but what you want is to identify who is admin or not in any of the two users, whether admin or normal user.
this is my result
I recently learn react native, but i got problem with input text. When i try to type 1st text field the 2nd text field cannot get focus, when i tap 2nd text field two times text field focus correctly
See video below : https://streamable.com/70njw
My code :
import React, { Component, Fragment } from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, Button, Content, Card, CardItem, Body, Input, Icon, Item} from 'native-base'
import { Grid, Row } from 'react-native-easy-grid'
import ThemeVariable from '../../../native-base-theme/variables/platform'
import AuthHeaderNavigation from '../../components/auth/HeaderNavigation'
class LoginScreen extends Component {
state = {
input: {
email: null,
password: null
}
}
setInputState(key, value) {
this.setState(prevState => ({
input: {
...prevState.input,
[key]: [value]
}
}))
}
render() {
return (
<Fragment>
<AuthHeaderNavigation/>
<Grid>
<Row style={styles.firstRow}></Row>
<View style={styles.authWrapper}>
<Card style={styles.authCard}>
<CardItem>
<Body>
<Item>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="person"/>
<Input onChangeText={text => this.setInputState('email', text)} placeholder="Email"/>
</Item>
</Body>
</CardItem>
<CardItem style={{ paddingTop: 0}}>
<Body>
<Item last>
<Icon style={{ color: ThemeVariable.footerDefaultBg }} name="lock"/>
<Input onChangeText={text => this.setInputState('password', text)}
secureTextEntry={true}
placeholder="Password"/>
</Item>
</Body>
</CardItem>
<CardItem>
<Body>
<Button block>
<Text> Login </Text>
</Button>
</Body>
</CardItem>
</Card>
</View>
<Row style={styles.secondRow}></Row>
</Grid>
</Fragment>
)
}
}
const styles = StyleSheet.create({
content: {
height: '100%'
},
firstRow: {
backgroundColor: ThemeVariable.footerDefaultBg
},
secondRow: {
backgroundColor: ThemeVariable.contentBaseBgColor
},
authWrapper: {
position: 'absolute',
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection:'row',
},
authCard: {
width: '90%',
borderRadius: 6,
padding: 5,
}
})
export default LoginScreen
If i change View to ScrollView everything works correctly, but may broken page design