wp api React will not create ACF Fields on a POST request

Question

I'm developing a react 17.0.2 application using wpapi 2.2.1. on the Front End. On the WordPress backend, I'm using the Advanced Custom Fields plugin 5.12.2 along with the ACF to REST plugin 3.3.3.

I created some ACF fields associated with posts based on a certain category.

On the Front End, Inside of my handleSubmit method, I'm using the create method from the wpapi docs https://www.npmjs.com/package/wpapi#creating-posts. I can create new WordPress posts from front to back including all of the standard WP fields like title, content, excerpt, etc... but when I try and create new values for the ACF fields it does not work. All I get are null values. Here's my code.

import WPAPI from "wpapi

const [name, setName] = useState("");
const [date, setDate] = useState("");
const [meal, setMeal] = useState("");

const wp = new WPAPI({
    endpoint: "https://someurl.com/wp-json",
    username: "......",
    password: "..........",
  });

Inside my handleSubmit method from the form submit

const handleSubmit = (e) => {
    e.preventDefault();

    if (name && meal && date) {
      try {
        setSpinner(true);
        const createPost = async () => {
          await wp
            .posts()
            .create({
              title: name,
              content: meal,
              acf: {
                name_provider: name,
                meal_provider: meal,
                date_provider: date,
              },
              categories: [188],
              status: "publish",
            })
            .then(async () => {
              const response = await wp.posts().categories(188);
              setSignupPosts(response);
              setName("");
              setMeal("");
              setDate("");
              setSpinner(false);
            });
        };
        createPost();
      } catch (error) {
        console.log("ERROR: ", error);
      }
    } else {
      console.log("You must fill out all three fields");
    }
  };

And here's the JSX

<div className='container'>
   <form onSubmit={handleSubmit}>
      <div className='form-group'>
         <label htmlFor='exampleInputEmail1'>Name</label>
         <input
            type='text'
            className='form-control'
            id='name'
            aria-describedby='emailHelp'
            placeholder='Name'
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
      </div>
      <div className='form-group'>
         <label htmlFor='exampleInputPassword1'>Meal</label>
         <input
            type='text'
            className='form-control'
            id='meal'
            placeholder='Meal'
            value={meal}
            onChange={(e) => setMeal(e.target.value)}
         />
      </div>
      <div className='form-group'>
         <label htmlFor='exampleInputPassword1'>Select Date</label>
         <input
            type='date'
            className='form-control'
            id='date'
            placeholder='Select Date'
            value={date}
            onChange={(e) => setDate(e.target.value)}
         />
      </div>
      <button type='submit' className='btn btn-primary'>
      Submit
      </button>
      {spinner ? (
      <Spinner color='dark' type='grow' style={{ margin: "0px 0px -7px 10px" }} />
      ) : null}
   </form>
   <div className='table-responsive'>
      <table className='table table-striped' style={{ marginTop: "50px" }}>
      <thead>
         <tr>
            <th scope='col'>Name</th>
            <th scope='col'>Meal</th>
            <th scope='col'>Date</th>
            <th>Edit</th>
         </tr>
      </thead>
      <tbody>
         {!signupPosts
         ? null
         : signupPosts.map((item, index) => {
         return (
         <tr key={index}>
            <td className='sign-up'>{item.name_provider}</td>
            <td
               dangerouslySetInnerHTML={{ __html: item.meal_provider }}
               className='sign-up'
               />
            <td
               dangerouslySetInnerHTML={{ __html: item.date_provider }}
               className='sign-up'
               />
            <td>
               <button
               className='btn btn-sm btn-primary'
               style={{ margin: 0 }}
               onClick={() => setEditItem(true)}>
               Edit
               </button>
               <button
                  className='btn btn-sm btn-primary'
                  onClick={() => {
               toggle();
               setItemId(item.id);
               }}>
               Delete
               </button>
            </td>
         </tr>
         );
         })}
      </tbody>
      </table>
   </div>
</div>

As you can see the problem lies somewhere here. The post is successful with a 201 response but the acf fields return null.

const createPost = async () => {
          await wp
            .posts()
            .create({
              title: name,
              content: meal,
              fields: {
                name_provider: name,
                meal_provider: meal,
                date_provider: date,
              },
              categories: [188],
              status: "publish",
            })
            .then(async () => {
              const response = await wp.posts().categories(188);
              setSignupPosts(response);
              setName("");
              setMeal("");
              setDate("");
              setSpinner(false);
            });
        };

I have also tried using the fields key based on this post How do I update Advanced Custom Fields on Wordpress with node-WPAPI? but to no avail.

Here is the response I get back from the server. As you can see the acf values are null

[
  {
    "id": 10757,
    "title": {
      "rendered": "Some Title"
    },
    "content": {
      "rendered": "<p>Pasta</p>\n",
      "protected": false
    },
    "excerpt": {
      "rendered": "<p>Pasta</p>\n",
      "protected": false
    },
    "author": 11,
    "categories": [
      188
    ],
    "acf": {
      "name_provider": null,
      "meal_provider": null,
      "date_provider": null
    },
    ......
  }
]

I just can't figure out what I'm doing wrong. Any help would be appreciated.

Answer 1

I figured it out and I feel like an idiot. In your ACF field group, in your WordPress Backend, you have to set the property "Edit in REST API?" to "Yes". Once I did that it started posting to the ACF fields.