How to fix Warning: Failed prop type

Question

I am trying to add a component to my robot-friends-redux and I got this warning below. I am trying to build a simple website where you can add, update, search, delete robots.

Now when I added my new component I got this error below. I am confused because I have added all the handlers and the props but I write this warning I don't understand and when I am writing in the fields of my update components no action is fired. very strange.

index.js:1 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (at UpdateRobot.js:16)
    in div (at UpdateRobot.js:7)
    in Uppdate_Robot (at App.js:52)
    in Route (at App.js:50)
    in Switch (at App.js:39)
    in div (at App.js:22)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:21)
    in App (created by ConnectFunction)
    in ConnectFunction (at src/index.js:22)
    in Provider (at src/index.js:21)

Here is my app.js file down below

import React, {
    Component
} from 'react';
import {
    Link,
    Route,
    Switch
} from 'react-router-dom';
import {
    BrowserRouter as Router
} from 'react-router-dom';
import CardList from '../components/CardList';
import {
    setName,
    addRobot,
    setUserName,
    setEmail,
    setId,
    updateRobot
} from '../actions';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import Home from '../components/Home';
import {
    connect
} from 'react-redux';
import AddRobot from '../components/AddRobot';
import UppdateRobot from '../components/UpdateRobot';
import DeleteRobot from '../components/DeleteRobot';
import './App.css';


function App({
    robots,
    name,
    nameChange,
    username,
    userNameChange,
    email,
    emailChange,
    addToList,
    id,
    idChange,
    uppdate_robo
}) {

    const stylecur = {
        fill: 'currentcolor'
    };
    return ( <
            Router >
            <
            div className = 'tc' >

            <
            header className = "bg-white black-80 tc pv4 avenir" >
            <
            a href = "/"
            className = "bg-black-80 ba b--black dib pa3 w2 h2 br-100" >
            <
            svg className = "white"
            data - icon = "skull"
            viewBox = "0 0 32 32"
            style = {
                stylecur
            } >
            <
            title > skull icon < /title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path > < /svg> <
            /a> <
            h1 className = "mt2 mb0 baskerville i fw1 f1" > RoboFriends < /h1> <
            h2 className = "mt2 mb0 f6 fw4 ttu tracked" > Create an ensembe of Robot with your friends! < /h2> <
            nav className = "bt bb tc mw7 center mt4 flex" >
            <
            Link to = {
                '/about'
            }
            className = "f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > About page < /Link> <
            Link to = {
                '/addRobo'
            }
            className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Add robot < /Link> <
            Link to = {
                '/updateRobo'
            }
            className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Update robot < /Link> <
            Link to = {
                '/searchRobo'
            }
            className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Search robot < /Link> <
            Link to = {
                '/delRobo'
            }
            className = "nav-link f6 f5-l link bg-animate black-80 hover-bg-light-green dib pa3 ph4-l" > Delete robot < /Link> <
            /nav> <
            /header> <
            Switch >

            <
            Route path = '/about'
            component = {
                Home
            }
            />

            <
            Route path = '/addRobo'
            render = {
                props => < AddRobot {
                    ...props
                }
                name = {
                    name
                }
                nameChange = {
                    nameChange
                }
                username = {
                    username
                }
                userNameChange = {
                    userNameChange
                }
                email = {
                    email
                }
                emailChange = {
                    emailChange
                }
                addToList = {
                    addToList
                }
                />} /
                >

                <
                Route
                path = '/updateRobo'
                render = {
                    props => < UppdateRobot {
                        ...props
                    }
                    name = {
                        name
                    }
                    nameChange = {
                        nameChange
                    }
                    username = {
                        username
                    }
                    userNameChange = {
                        userNameChange
                    }
                    email = {
                        email
                    }
                    emailChange = {
                        emailChange
                    }
                    id = {
                        id
                    }
                    idChange = {
                        idChange
                    }
                    uppdate_robo = {
                        uppdate_robo
                    }
                    />} /
                    >

                    <
                    /Switch>   <
                    Scroll > {
                        <
                        ErrorBoundry >
                        <
                        CardList robots = {
                            robots
                        }
                        /> <
                        /ErrorBoundry>
                    } <
                    /Scroll> <
                    /div> <
                    /Router>
                );
            }

            const mapStateToProps = (state) => {
                return {
                    robots: state.manage_data.robots,
                    name: state.manage_data.name,
                    username: state.manage_data.username,
                    email: state.manage_data.email,
                    id: state.manage_data.id
                }
            }

            const mapDispachToProps = (dispatch) => {
                return {
                    nameChange: (event) => dispatch(setName(event.target.value)),
                    userNameChange: (event) => dispatch(setUserName(event.target.value)),
                    emailChange: (event) => dispatch(setEmail(event.target.value)),
                    idChange: (event) => dispatch(setId(event.target.value)),
                    addToList: () => dispatch(addRobot()),
                    uppdate_robo: () => dispatch(updateRobot)
                }
            }


            export default connect(mapStateToProps, mapDispachToProps)(App);

Below is my AddRobot.js file

import  React from 'react';

const AddRobot = ({name,nameChange,username,userNameChange,email,emailChange,addToList}) => {

    return (
    <div>
         <h1>Add Robot By Name</h1>


      <input
        className='pa2 ba b--green bg-lightest-blue'
        placeholder='Add Name'
        value={name}
        onChange={nameChange}
      />

     <input
        className='pa2 ba b--green bg-lightest-blue'
        placeholder='Add Username'
        value={username}
        onChange={userNameChange}
      />

     <input
        className='pa2 ba b--green bg-lightest-blue'
        placeholder='Add Email'
        value ={email}
        onChange={emailChange}
      />

      <button className="f50 link dim ph3 pv2 mb2 dib white bg-dark-green ma2" 
         href="addRobo"
         onClick={addToList}
         >
         Add Robot
        </button>

    </div>
 );
}

export default AddRobot;

Below is my UpdateRobot.js file

import React from 'react';

const Uppdate_Robot = ({
    get_name,
    name,
    get_username,
    username,
    get_email,
    email,
    id,
    idChange,
    uppdate_robo
}) => {


    return ( <
        div >
        <
        h1 > Update Robot < /h1> <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Add ID Robot To Change'
        value = {
            id
        }
        onChange = {
            idChange
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Change Name'
        value = {
            name
        }
        onChange = {
            get_name
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Change Username'
        value = {
            username
        }
        onChange = {
            get_username
        }
        />

        <
        input className = 'pa2 ba b--green bg-lightest-blue'
        placeholder = 'Change Email'
        value = {
            email
        }
        onChange = {
            get_email
        }
        />

        <
        button className = "f50 link dim ph3 pv2 mb2 dib white bg-dark-green"
        href = "#0"
        onClick = {
            uppdate_robo
        } >
        Update Robot <
        /button>


        <
        /div>
    );
}
export default Uppdate_Robot;

Answer 1

It is really hard to read your code, but it seems that the onChange functions that you are passing to your <input> elements are undefined. Most likely, it's because of a mismatch between the name of the props that the Uppdate_Robot component is expecting versus the name of the props that you are actually passing in.

Expected props:

const Uppdate_Robot = {
  get_name,
  name,
  get_username,
  username,
  get_email,
  email,
  id,
  idChange,
  uppdate_robo
};

And you are passing:

<UppdateRobot
  {...props}
  name={name}
  nameChange={nameChange}
  username={username}
  userNameChange={userNameChange}
  email={email}
  emailChange={emailChange}
  id={id}
  idChange={idChange}
  uppdate_robo={uppdate_robo}
/>;

So get_name, get_username and get_email are undefined. Make sure to use the same name or you can also rename the destructured props like this:

const Uppdate_Robot = {
  get_name: nameChange,
  name,
  get_username: userNameChange,
  username,
  get_email: emailChange,
  email,
  id,
  idChange,
  uppdate_robo
};

Hope it works.