0

I have a weird API endpoint where there are two properties for the same field. 

{
 id:"123",
 title: {
  rendered: "Hi, i'm rendered",
  raw: "<p> Hi, I'm the title</p>"
}

in the Edit form, I have a Component like so:

        <TextInput
            source="title.raw"
            defaultValue="title.rendered"
            validation={{ text: true }}
            validate={required()}
            />

But that's not working. How can I get the title.rendered to show up as default value but have title.raw be what's sent back to the endpoint/ server?

friendlyfire
  • 87
  • 1
  • 12
  • Not sure to understand what you are trying to achieve ? Just passing to data as props to the ? – Simon Bruneaud Apr 24 '20 at 23:39
  • @SimonBruneaud I have the data I need via title.rendered. I just can't get it as the default value. When I use it as in my example, it renders literally as "title.rendered" on text input. I need it to interpoloate the value of title.rendered as the default on the input on load and when edited, POST to title.raw. – friendlyfire Apr 24 '20 at 23:57

1 Answers1

1

Try this: 

import { FormDataConsumer } from 'react-admin'

<Edit ...>
  ...
  <FormDataConsumer>
    {({ formData, ...rest }) =>
      <TextInput
        source="title.raw"
        defaultValue={formData.title.rendered}
        validation={{ text: true }}
        validate={required()}
      />
    }
  </FormDataConsumer>
</Edit>
MaxAlex
  • 2,919
  • 1
  • 14
  • 14
  • That worked perfectly! Where did you learn about this component? I see very little about it in the official docs. – friendlyfire Apr 28 '20 at 15:52
  • Yes, there is not much information, but it is quite simple: https://marmelab.com/react-admin/Inputs.html#linking-two-inputs – MaxAlex Apr 29 '20 at 03:32