Hey, does anyone know why they are not identified

Question

r t c and setRooms in Addroom component are not identified, someone knows why?

Thanks..

App.js

import Addroom from './components/Addroom.js';
import './App.css';

function App() {

  const [rooms, setRooms] = useState([{name: 'Room A',type: '',color:'',},{name: 'Room B',type: '',color:'',},{name: 'Room C',type: '',color:'',}]);
      




const addRoom=(n,t)=>{
  setRooms([...rooms,{name:n,type:t}])
}
  
  return (
    <div className="App">
  
  <h2>My Smart House</h2>

      {rooms.map((e)=>{
    return <Addroom n={e.room} t={e.type} c={e.color} add={addRoom}/>
  })}


    </div>
  );
}

export default App;

Addroom.js

export default function Addroom(props) {

    const [name, setName]= useState('');
    const [type, setType]= useState('');


    return (
        <div>
            <h1>Room: {r.props}</h1>
            <h3>Type: {t.props}</h3>
            <h4>Color: {c.props}</h4>
            <button onClick={()=>setRooms()}></button>



            <input onChange={(e)=>{setName(e.target.value)}} placeholder="name"/><br/>
              <input onChange={(e)=>{setType(e.target.value)}} placeholder="type"/><br/>
              <button onClick={()=>{props.add(name,type)}}>Add</button>
        </div>
    )
}

Answer 1

You should use props.d,props.t and not d.props as you have the props object and use its values.

Also, you really shouldn't use such shortcuts its a very bad practice - use full meaningful names, you also have a typo in AddRoom prop:

// not n={e.room}, there is no usage for props.n
<Addroom r={e.room} t={e.type} c={e.color} add={addRoom} />;

Moreover, in Addroom you have a use of setRooms which is undefined, such function is not in scope of AddRoom.