React - JS | Passing body variable name rather than its content

Question

I think I have a good question. I'm making my own overarching request repo that I can just refer to rather than embedding all requests in each separate JS file.

For requests where I'm passing a body I need to pass two things into stringify

1. The identifier denoted field
2. The value denoted content

I don't seem to be able to replace the identifier field with its actual content, I think it is passing "field" being its name rather than the content of the "field" string.

Calling code:

Request.Request.useSendPostWithBody("User/checkAlt","email","[email protected]")

Request code:

Request.useSendPostWithBody = (endpoint, field, content) => {
    const [ data, setData ]=useState('')

        useEffect(() => {

            fetch(`${window.ipAddress.ip}/${endpoint}`, {
                method: "POST",  
                headers:{'Content-Type':'application/json'},
                body: JSON.stringify({ email: content })}) // this works as the required field for this request is email

                // body: JSON.stringify({ field : content })}) // this doesn't and here is where I think the issue lies because not all requests are going to pass "email"

            .then((result)=> { return result.json() })

            .catch(error =>{ 
            console.log("error")
            })

            .then((data)=>{ setData(data)
            console.log('data')
            console.log(data) })

        },[])
    }

Answer 1

you need to use brackets [] to denote that the key name needs to be evaluated, like so:

{
  // other values,
  body: JSON.stringify({ [field]: content })}),
}