I have been building an app in React Native and have decided that since my `Login` and `Signup` components share much of the same code, it would be best to create an `AuthState` component and pass `login={true}` or `login={false}` as props to trigger `renderLogin()` or `renderSignup()` in `AuthState`. However, in doing so, I think I have written extraneous code. I tried to minimize this by writing a `renderEmailAndPasswordForms()` function that gets included in `renderLogin()` and `renderSignup()` but I am sure there's better ways to clean all of this up. Can someone point me in the right direction? Here is my code: login.js ``` import React, { Component } from 'react'; // Components import AuthShared from '../auth_shared'; export default class Login extends Component { render() { return ( ); } } ``` signup.js ``` import React, { Component } from 'react'; // Components import AuthShared from '../auth_shared'; export default class SignUp extends Component { render() { return ( ); } } ``` auth_shared.js ``` import React, { Component } from 'react'; import { AlertIOS, Dimensions, Image, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; import { Actions } from 'react-native-router-flux'; import firebaseApp from 'TextbookSwap/firebase_setup'; import styles from 'TextbookSwap/app_styles'; // Components import HeaderImage from './header_image'; // For Firebase Auth const auth = firebaseApp.auth(); export default class Login extends Component { constructor(props) { super(props); this.state = { firstName: '', lastName: '', email: '', password: '', passwordConfirmation: '' } } componentDidMount() { let user = auth.currentUser; if (user) { console.log(msg) Actions.home } else { return; } } render()

I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve it in TypeScript. With the following code: ``` import React, { Component } from 'react'; import { Text } from 'react-native'; interface TestProps { title?: string, name?: string } const defaultProps: TestProps = { title: 'Mr', name: 'McGee' } const Test = (props = defaultProps) => ( {props.title} {props.name} ); export default Test; ``` Calling `` renders "Sir Lancelot" as expected, but `` results in nothing, when it should output "Mr McGee". Any help is greatly appreciated.

I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. React and React Native seems to have the same format. Do they have completely different syntax?

I am currently going through the React-Native tutorials. I began with the Getting Started tutorial, where I made a new react native project and successfully managed to run the project on my device. I then started the Props tutorial, I copied the code snippet and tried to run the project again and had the following error message show up on my screen:

After upgrading to React Native 0.61, I get a lot of warnings like this: ``` VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. ``` What is the other `VirtualizedList-backed container` that I should use, and why is it now advised not to use it like that?

I am currently learning hooks concept in React and trying to understand below example. ``` import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } ``` The above example increments the counter on the handler function parameter itself. What if I want to modify count value inside event handler function Consider below example: ``` setCount = () => { //how can I modify count value here. Not sure if I can use setState to modify its value //also I want to modify other state values as well here. How can I do that } setCount()}> Click me ```

Considering below hooks example ``` import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } ``` Basically we use this.forceUpdate() method to force the component to re-render immediately in React class components like below example ``` class Test extends Component{ constructor(props){ super(props); this.state = { count:0, count2: 100 } this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component } setCount(){ let count = this.state.count; count = count+1; let count2 = this.state.count2; count2 = count2+1; this.setState({count}); this.forceUpdate(); //before below setState the component will re-render immediately when this.forceUpdate() is called this.setState({count2: count } render(){ return ( Count: {this.state.count}>. } } ``` But my query is How can I force above functional component to re-render immediately with hooks?

I'm trying to send GET request as second parameter but it doesn't work while it does as url. This works, $_GET['naam'] returns test: ``` export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; ``` But when I try this, there is nothing in `$_GET` at all: ``` export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { password: 'pass', naam: naam, score: score }) .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; ``` Why can't I do that? In the docs it clearly says it's possible. With `$_POST` it doesn't work either.

I am trying to toggle the state of a component in ReactJS but I get an error stating: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. I don't see the infinite loop in my code, can anyone help? ReactJS component code: ``` import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = this.state.details; this.setState({ details: !currentState }); } render() { return ( {this.props.config.server} {this.props.config.verbose} {this.props.config.type} PLACEHOLDER MORE INFO {Details} )} } export default Item; ```

The following code can be found in this live example I've got the following react native element: ``` 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..! Some other long text which you can still do nothing about.. Off the screen we go then. ); } }); AppRegistry.registerComponent('SampleApp', () => SampleApp); ``` with the following styles: ``` var styles = StyleSheet.create({ container:{ flex:1, flexDirection:'column', justifyContent: 'flex-start', backgroundColor: 'grey' }, descriptionContainerVer:{ flex:0.5, //height (according to its parent) flexDirection: 'column', //its children will be in a row alignItems: 'center', backgroundColor: 'blue', // alignSelf: 'center', }, descriptionContainerVer2:{ flex:0.5, //height (according to its parent) flexDirection: 'column', //its children will be in a row alignItems: 'center', backgroundColor: 'orange', // alignSelf: 'center', }, descriptionContainerHor:{ //width: 200, //I DON\'T want this line here, because I need to support many screen sizes flex: 0.3, //width (according to its parent) flexDirection: 'column', //its children will be in a column alignItems: 'center', //align items according to this parent (like setting self align on each item) justifyContent: 'center', flexWrap: 'wrap' }, descriptionText: { backgroundColor: 'green',//Colors.transparentColor, fontSize: 16, color: 'white', textAlign: 'center', flexWrap: 'wrap' } }); ``` This result