Laravel: Save uuidv4 to database - reactjs

Question

I'm using React and Laravel for the creation of a list.
In the add button I have the following
function handleAdd() {
const newList = list.concat({ name, id: uuidv4(), value });
setList(newList);
setName("");
setValue("");
}
const onAddSocial = (e) => {
e.preventDefault();
const test = {
value: value,
name: name,
};
axios.post('http://localhost:8000/api/social', test)
.then((res) => {
toast(<div class="text-primary font-weight-bolder">Social link added successfully!</div>,{ delay: 0 });
console.log(res)
}).catch((error) => {console.log(error)
})
}
And the button to trigger both functions for the creation :
<Button
onClick={(e) => {
props.handleAdd();
props.onAddSocial(e);
}}
>
The element is created, but in the datatabse the id receive an incremented value. How do I pass the uuidv4() of the created element instead ?
The store controller :
public function store(Request $request)
{
$data = new Social();
$data->value = $request->value;
$data->name = $request->name;
$data->save();
}

Answer 1

You have to use following code
In your Social Model you have to use like this
public $incrementing = false;
protected $keyType = 'string';
public static function boot(){
parent::boot();
static::creating(function ($social) {
$social->id = Str::uuid(36);
});
}
Add this line in header section
use Illuminate\Support\Str;
In your database\migration social file add below code also
public function up()
{
Schema::create('socials', function (Blueprint $table) {
$table->uuid('id', 36)->primary();
$table->timestamps();
});
}