Change/altering the form value before submit

Question

We're using react-admin react-admin docs

I've got a form with fields productName, Price and Image. Image field has a string type, that means Upload an image to s3 or any other destination and pass uploaded image URL to image field dynamically.

I've working functionality for upload image to s3 and I'm getting s3 URL now the user will fill ProductName and Price fields and hit submit. and when the form submits I want to pass Image URL as well with other fields.

Above is my requirements that I want to achieve. Let me explain to you what I've tried.

I'm following this link link.

ProductCreate.js

export class ProductCreate extends Component{

render(){

    return (
        <Create {...this.props}>
            <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">                    
                <TextInput source="name" />
                <TextInput source="price"/>
            </SimpleForm>
        </Create>
    )
}
}

In the above code, you can see I've used toolbar props on SimpleForm with custom toolbar called PostCreateToolbar.

PostCreateToolbar.js

const PostCreateToolbar = props => (
<Toolbar {...props}>
    <SaveWithNoteButtonView
        label="Save"
        redirect="show"
        submitOnEnter={false}
        variant="contained"
    />
</Toolbar>
);

SaveWithNoteButtonView.js

class SaveWithNoteButtonView extends Component {    

handleClick = () => {
    const { basePath, handleSubmit, redirect } = this.props;

    const form = useForm();

    console.log("123", this.props);
    return handleSubmit(values => {
        console.log("456", this.props);
        crudCreate('posts', { ...values, imageUrl: "https://s3.us-east-1.amazonaws.com/..." }, basePath, redirectTo);
    });
};

render() {
    const { handleSubmitWithRedirect, saveWithNote, ...props } = this.props;

    return (
        <SaveButton
        handleSubmitWithRedirect={this.handleClick}
        {...props}
        />
        );
    }
}

In SaveWithNoteButtonView file, you can see I've handleClick function and when user click on save button this function will call but handleSubmit is not called. When user click on save button I can see first console but not second one that is within handleSubmit. May be that is the issue when API call happens I'm not able to send imageUrl field.

Anyone have any other way to pass the custom data before submit I'm open to get idea.

One more way, I thought is in product form I can make imageURL field disable and when image uploaded to s3 and get URL then somehow fill imageURL field with the imageURL value. so when we submit a form imageURL field value pass to api. If you know how to achieve this it'd be useful.

Raquel Lopez · Answer 1 · 2020-04-16T17:00:12.090

Why do you use Class instead of Functions? useForm is a Hook, and must be used inside of functional components.

Check their example again. useForm handles the data of the form. Try console.log(form) with it, Also, you can use useForm method .change(), to change its values before submitting it.

Their example works perfectly if you follow it accordingly. Try to emulate their code, and change only the image value you want to add. You shouldn't be using CRUDcreate because react-admin handles the saving automatically.

Change/altering the form value before submit

1 Answers1