reduxformimportant

 https://redux-form.com/8.3.0/examples/selectingformvalues/

packages:- 

"@reduxjs/toolkit": "^1.9.5",

"redux-form": "^8.3.10"

store.jsx:

import { configureStore } from '@reduxjs/toolkit'

import {reducer as formReducer} from 'redux-form'

export const store = configureStore({

  reducer: {form:formReducer},

})

//contactform:

import React, { useState } from 'react'

import { Field, formValues, reduxForm } from 'redux-form'

import Profile from './Profile'

import { reducer as formReducer } from 'redux-form'

let ContactForm = props => {

  // console.log(props);

  const { handleSubmit } = props;

const [showProfile,setShowProfile]=useState(false);

  return (

    <form onSubmit={handleSubmit((formValues)=>{

      // console.log(formValues);

      setShowProfile(true);

    })}>

      <div>

        <label htmlFor="firstName">First Name</label>

        <Field name="firstName" component="input" type="text" />

      </div>

    

      <div>

        <label htmlFor="password">password</label>

        <Field name="password" component="input" type="password" />

      </div>

      <button type="submit">Save</button>

      {showProfile?<Profile/>:null}

    </form>

       

  )

}

//App.jsx:

import React from 'react'

import './App.css'

import Second from './Components/ContactForm';

import { store } from './store.jsx'

import { Provider } from 'react-redux'

export default function App() {

 

  

  return (

    <div>

      

     <Provider store={store}>

    <Second/>

  </Provider>

     

     

    </div>

  )

}

//Profile.jsx:

import React from 'react'

import {connect} from 'react-redux'

 function Profile(props) {

    // console.log(

    //     props

    // );

  return (

    <div>Profile

  {props.contactform.firstName}

  {/* alt+shift+downkey copy and paste */}

  {props.contactform.password}

  

         </div>

  )

}

const mapStateToProps=(state)=>{

    console.log(state.form.contactform);

    return{

        contactform:state.form.contactform.values

        //initialy contactform doesn'texits

    }

}

export default connect(mapStateToProps)(Profile)

ContactForm = reduxForm({

  // a unique name for the form

  form: 'contactform'

})(ContactForm)

export default ContactForm