Map Dispatch to Props

PHOTO

Thu Nov 12 2020 23:54:08 GMT+0000 (UTC)

Saved by @bifrost #react.js

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line
const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message)=>{
            dispatch(addMessage(message))
        }
    }
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

REACTEUSE

@bifrost

REACTEUSE Material UI style snippet GRID material ui MATERIAL UI _ custom style Absolute path variable .env retrieve data firestore React class based component save state locally REACT Extract State Logic to Redux Use Provider to Connect Redux to React Map State to Props Map Dispatch to Props Connect Redux to React Connect Redux to the Messages App Extract Local State into Redux base app React redux How To Build Forms in React | DigitalOcean forms class based component How to handle multiple input field in react form with a single function? - GeeksforGeeks Class based component fonctional forms Collecting data from a wizard form - Gosha Arinich How to create multi-step forms in React? - DEV React-admin - Admin and Resource Components React Color Gradients create react app build serv 21 Performance Optimization Techniques for React Apps Snazzy Maps - Free Styles for Google Maps get value from localstorage react Code Example Local storage portfolio - EmailJS Material UI | Formik | Formik react-spring Shake - React Reveal React Anime Themes – ApexCharts.js React Router: Declarative Routing for React.js React Hook Form Production-Ready Animation Library for React | Framer Motion Production-Ready Animation Library for React | Framer Motion

.then((response) => 
      {
        alert(response[0].Message)
        if (response[0].Message =='success') {
          
           props.navigation.navigate('Home')
        }else{
             
        }
      })

Contact Manager init

function ContactManager(props) {
  const [contacts, setContacts] = useState(props.data);

  return (
    <div>
      <AddPersonForm />
      <PeopleList data={contacts} />
    </div>
  );
}

Contact Manager | People List

function PeopleList(props) {
  const arr = props.data;
  const listItems = arr.map((val, index) =>
    <li key={index}>{val}</li>
  );
  return <ul>{listItems}</ul>;
}

Contact Manager | Add Person Form

function AddPersonForm() {
  const [ person, setPerson ] = useState("");

  function handleChange(e) {
    setPerson(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }
  return (
    <form onSubmit={handleSubmit}>
    <input type="text" 
    placeholder="Add new contact" 
    onChange={handleChange} 
    value={person} />
    <button type="submit">Add</button>
    </form>
    );
}

Handle Form Submit

function AddForm() {
  const [sum, setSum] = useState(0);
  const [num, setNum] = useState(0);

  function handleChange(e) {
    setNum(e.target.value);
  }

  function handleSubmit(e) {
    setSum(sum + Number(num));
    e.preventDefault();
  }

  return <form onSubmit={handleSubmit}>
  <input type="number" value={num} onChange={handleChange} />
  <input type="submit" value="Add" />
  <p> Sum is {sum} </p>
  </form>;
}

 function handleChange(e) {
    setState(e.target.value);
  }

function Converter() {
  const [km, setKm] = useState(0);

  function handleChange(e) {
    setKm(e.target.value);
  }
  function convert(km) {
    return (km/1.609).toFixed(2);
  }

  return <div>
  <input type="text" value={km}
     onChange={handleChange} />
  <p> {km} km is {convert(km)} miles </p>
  </div>;
}

function counter

function Counter() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    alert("Number of clicks: " + counter);
  });

  function increment() {
    setCounter(counter+1);
  }
  return <div>
  <p>{counter}</p>
  <button onClick={increment}>Increment</button>
  </div>;
}

function counter

function Counter() {
  const [counter, setCounter] = useState(0);

  function increment() {
    setCounter(counter+1);
  }

  return <div>
  <p>{counter}</p>
  <button onClick={increment}>
    Increment
  </button>
  </div>;
}

User Registration with PHP and MYSQL in React Native

https://www.youtube.com/watch?v=xo_ZRD_IAp0

#react.js #react-native.ja

App.js new with api

import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  View,
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import axios from 'axios'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import LoginTextbox from './components/Textbox'
import Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import { useState } from 'react';
// import FlatList from './components/FlatList'

// const drawer = createDrawerNavigator()
const stack = createStackNavigator()
// const tab = createBottomTabNavigator()

 
function App(){  
    return(
       <NavigationContainer>
         <stack.Navigator>
           <stack.Screen name="Login" component={Appdata}/>
           <stack.Screen name="Home" component={home}/>
         </stack.Navigator>
       </NavigationContainer>
    )
}

const Appdata = (props) =>
{
 const [state, stateupt] = useState({cardnum:'', pass:''})
 const LoginPress2 = () => {
    // URL1 = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
    // Post = async (URL1, Data) => {
     
    //   return await axios.post(URL1, Data
    //     .then(function (response) {
    //       console.warn(response);
    //     }
    //     .catch(function (error) {
    //       console.warn(error);
    //     }))
    //     );       
    //   }
    var cardno = state.cardnum
    var password = state.pass
    if(cardno.length == 0 || password.length == 0)
    {
      alert("Required Fields Missing!")
    }else 
    {
      let URL = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
      var headers = {
          'Accept' : 'application/json',
          'Content-Type': 'application.json' 
      }
      var Data =
      {
        cardno: cardno,
        password: password
      }
      fetch(URL, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Dat)
      })
      .then((response)=> response.json())
      .then((response) => 
      {
        alert(response[0].Message)
      })
      .catch(error =>
        {
          alert("Error" + error)
        }
      )
      // axios.post('https://scrapcollector12.000webhostapp.com/cardLogin.php', {
          
      // })
      // .then(function (response) {
      //   console.warn(response);
      // })
      // .catch(function (error) {
      //   console.warn(error);
      // });
    }
  }
  console.warn(state)
  return(
      <View >
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum}
          onChangeText={(e) => stateupt({...state, cardnum:e})}
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass}
          onChangeText={(e) => stateupt({...state,pass:e})}
        />
        <Text>{state.cardnum}</Text>
        <Text>{state.pass}</Text>
       <Button style={{}} title="Login" onPress={()=> {LoginPress2} /*(props.navigation.navigate('Home')*/}/> 
      </View>
  )
}
const home = (props) => {
  const data = "some data!!!"

  return (
    <View>
       <Text style={{fontSize:30}}>Functional Component!!!</Text>
       <TextInput placeholder={"Enter Your Name"} onChangeText={(e)=>{console.warn(e)} }/>
       <Button title="Go to next Screen" onPress={() => props.navigation.navigate('Detail')}/>
       <Func_comp Data={data} />
    </View>
  )
}

function Detailscr()
{
    return(
      <View>
        <Text style={{fontSize:50}}>Details screen</Text>
      </View>
    )
}
class Class_comp1 extends React.Component
{
    render()
    {
        return(
            <View>
                <Text style={{fontSize:60,}}>From Class_comp</Text>
                <Button title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

export default App;

#react.js #react-native.ja

import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  placeholder,
  TextInput,
  View,
  StyleSheet
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { Value } from 'react-native-reanimated';
import { WHITE } from '../styles/colors/colors';

const LoginTextbox = (props) => {
  return (
    <View style={styles.flex}>
      <TextInput
        placeholder = {props.placeholder}
            keyboardType = {props.keyboardType}
            secureTextEntry = {props.secureTextEntry}
            placeholderTextColor={props.placeholderTextColor}
            width={props.width}
            value = {props.value}
            style={styles.container}
            onChangeText = {props.onChangeText}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  flex:{flexDirection:'row', borderWidth:1, width: '100%'},
   container:{width: 200}
})

export default LoginTextbox;

#react.js #react-native.ja

import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  View,
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import axios from 'axios'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import LoginTextbox from './components/Textbox'
import Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import { useState } from 'react';
// import FlatList from './components/FlatList'

// const drawer = createDrawerNavigator()
const stack = createStackNavigator()
// const tab = createBottomTabNavigator()

 
function App(){  
    return(
       <NavigationContainer>
         <stack.Navigator>
           <stack.Screen name="Login" component={Appdata}/>
           <stack.Screen name="Home" component={home}/>
         </stack.Navigator>
       </NavigationContainer>
    )
}

const Appdata = (props) =>
{
  Data = [stateupt.cardnum, stateupt.pass]
  URL1 = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
  const LoginPress2 = () => {
    Post = async (URL1, Data) => {
      return await axios.post(URL1, Data
        .then(function (response) {
          console.warn(response);
        }
        .catch(function (error) {
          console.warn(error);
        }))
        );       
      }
  }
  const [state, stateupt] = useState({cardnum:'', pass:''})
  console.warn(state)
  return(
      <View >
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum}
          onChangeText={(e) => stateupt({cardnum:e})}
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass}
          onChangeText={(e) => stateupt({pass:e})}
        />
       <Button style={{}} title="Login" onPress={()=> props.navigation.navigate('Home')}/> 
      </View>
  )
}
const home = (props) => {
  const data = "some data!!!"

  return (
    <View>
       <Text style={{fontSize:30}}>Functional Component!!!</Text>
       <TextInput placeholder={"Enter Your Name"} onChangeText={(e)=>{console.warn(e)} }/>
       <Button title="Go to next Screen" onPress={() => props.navigation.navigate('Detail')}/>
       <Func_comp Data={data} />
    </View>
  )
}

function Detailscr()
{
    return(
      <View>
        <Text style={{fontSize:50}}>Details screen</Text>
      </View>
    )
}
class Class_comp1 extends React.Component
{
    render()
    {
        return(
            <View>
                <Text style={{fontSize:60,}}>From Class_comp</Text>
                <Button title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

export default App;

#javascript #react.js

Fetch data from an API and set state

useEffect(() => {
  requestPets();
}, []);

async function requestPets() {
  const res = await fetch(API_URL);
  const json = await res.json();
  setPets(json.pets)
}

    <Navbar bg="dark" variant="dark">
      <Navbar.Brand href="#home">Navbar</Navbar.Brand>
      <Nav className="mr-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#features">Features</Nav.Link>
        <Nav.Link href="#pricing">Pricing</Nav.Link>
      </Nav>
      <Form inline>
        <FormControl type="text" placeholder="Search" className="mr-sm-2" />
        <Button variant="outline-info">Search</Button>
      </Form>
    </Navbar>

Browse more snippets >>