Programmatically control the properties of a component

Question

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>
    )
 

Answer 1

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>
    )