React useState unable to access the value from the object

1

In this there is a object name userData.
When I want to access properties from userData in my input tag so you can see that I have used map function to generate different tag so while accessing the properties of userData
I was unable to access the properties.
Look into the value attribute.

{inputs.map((input) => {
                text = input.name
                return (
                  <div className='formInputs' key={input.id}>
                    <label>{input.label}</label>
                    <input
                      name={input.name}
                      type={input.type}
                      value={userData.text}
                      placeholder={input.placeholder}
                      onChange={handleInput}
                    ></input>
                  </div>
                )
              })}
2

Can we see the rest of the code?

3

ok i will post the rest of the code here

import React, { useState } from 'react'
import Sidebar from '../../components/sidebar/Sidebar'
import Navbar from '../../components/navbar/Navbar'
import './create.scss'
import DriveFolderUploadOutlinedIcon from '@mui/icons-material/DriveFolderUploadOutlined'
import usePost from '../../hooks/usePost'
import { logDOM } from '@testing-library/react'

const Create = ({ inputs, title }) => {
  const userUrl = 'http://localhost:4000/api/v1/auth/register'
  const [data, post, loading, error] = usePost(userUrl)
  const [file, setFile] = useState('')
  const [createData, setCreateData] = useState({
    username: 'cdscsd',
    name: 'sdffds',
    email: 'cdscs',
    phone: 'csdc',
    password: 'csdcs',
    address: 'csdc',
  })

  const handleInput = (e) => {
    e.preventDefault()
    const { name, value } = e.target
    setCreateData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const sendCreateData = {
      name: createData.name,
      email: createData.email,
      password: createData.password,
      role: 'user',
    }
    post(sendCreateData)
  }

  return (
    <div className='create'>
      <Sidebar />
      <div className='createContainer'>
        <Navbar />
        <div className='top'>{title}</div>
        <div className='bottom'>
          <div className='left'>
            <img
              src={
                file
                  ? URL.createObjectURL(file)
                  : `https://icon-library.com/images/no-image-icon/no-image-icon-0.jpg`
              }
              alt='avatar'
            />
          </div>
          <div className='right'>
            <form>
              <div className='formInput'>
                <label>
                  Image: <DriveFolderUploadOutlinedIcon className='icon' />
                </label>
                <input
                  type='file'
                  id='file'
                  onChange={(e) => setFile(e.target.files[0])}
                  style={{ display: 'none' }}
                />
              </div>
              {inputs.map((input) => {
                console.log(input.value)
                return (
                  <div className='formInputs' key={input.id}>
                    <label>{input.label}</label>
                    <input
                      name={input.name}
                      type={input.type}
                      placeholder={input.placeholder}
                      onChange={handleInput}
                      value={input.value}
                    ></input>
                  </div>
                )
              })}
              <button onClick={handleSubmit}>Send</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Create


export const userInputs = [
  {
    id: 1,
    label: 'Username',
    type: 'text',
    placeholder: 'john_doe',
    name: 'username',
    value: createData.username,
  },
  {
    id: 2,
    label: 'Name and surname',
    type: 'text',
    placeholder: 'John Doe',
    name: 'name',
    value: createData.name,
  },
  {
    id: 3,
    label: 'Email',
    type: 'mail',
    placeholder: 'john_doe@gmail.com',
    name: 'email',
    value: createData.email,
  },
  {
    id: 4,
    label: 'Phone',
    type: 'text',
    placeholder: '+1 234 567 89',
    name: 'phone',
    value: createData.phone,
  },
  {
    id: 5,
    label: 'Password',
    type: 'password',
    name: 'password',
    value: createData.password,
  },
  {
    id: 6,
    label: 'Address',
    type: 'text',
    placeholder: 'Elton St. 216 NewYork',
    name: 'address',
    value: createData.address,
  },
  {
    id: 7,
    label: 'Country',
    type: 'text',
    placeholder: 'USA',
    name: 'country',
    value: createData.country,
  },
]
4

Where is userInputs defined and how is createData in scope there?

5

userInputs is defined in different file and passed on as props .
and createData is just the variable defined in that same file

6

actually i have found the solution for my problem as in my main file i wanted to access the value from userData object for input value .
So i have created a variable on the file named as userData and it worked.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.