Programmatically control the properties of a component-CodePudding

Suppose I have a component that a parameter from another component called jobData. The component could be a value or be undefined. If it has a value, I want to assign it to a textField property called defaultValue. If jobData is undefined, I want to assign it to something else. I tried the below in my code, but it didn't work. Is there any/another way to do this?

import React from 'react'
import {Dialog, TextField} from '@mui/material'

export default function myFunction({jobData}) {
    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={if({jobData.length} > 0){
                     {jobData[0]['id']}
                  } else { {jobData.length.toString()} 
                  }
              />
        </form> 
    </div>
    )

CodePudding user response：

The issue in your code is with the syntax of the ternary operator (if({jobData.length} > 0){). It should be jobData && jobData.length > 0 ?.

Here is the corrected version of the code:

import React from 'react'
import {Dialog, TextField} from '@mui/material'

export default function myFunction({jobData}) {
    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={jobData && jobData.length > 0 ? jobData[0]['id'] : jobData.length.toString()}
                />
            </form> 
        </div>
    )
}

In this code, the ternary operator checks if jobData is truthy and has a length greater than 0. If that is true, it assigns the value of jobData[0]['id'] to the defaultValue property. Otherwise, it assigns jobData.length.toString().

This is a way to programmatically control the properties of a component based on the value of jobData.

CodePudding user response：

Try using encapsulation

import React from 'react'
import {Dialog, TextField} from '@mui/material'

export default function myFunction({jobData}) {
   function isJobDataUndefined(){
     if(jobData.length > 0){
        return jobdata[0]['id']
     }
     return jobData.length.toString()
   }

    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={isJobDataUndefined()} 
              />
        </form> 
    </div>
    )