How to update URL before OnClick on FacebookShareButton

Question

I have a React app i which I use React-Share - FacebookSharebutton. In the app user can create a list of pictures to be shared on Facebook. The list adds parameters to the URL as they are chosen and the URL can then be shared.My problem is that i need to update the url before the FacebookShareButton calls the facebook page.

I have this:

import * as React from 'react';
import { FacebookShareButton } from 'react-share';


interface IWorkoutBuilderProps {
    onExerciseAdded?: (id: string) => any
    onExerciseRemoved?: (index: number) => any
    onExercisesCleared?: () => any
    onExercisesStarted?: () => any
    exercises: string
}

interface IWorkoutBuilderState {
    playing: boolean
    saving: boolean
}


export class WorkoutBuilder extends React.Component<IWorkoutBuilderProps, IWorkoutBuilderState> {
    constructor(props: IWorkoutBuilderProps) {
        super(props);

        this.state = {
            playing: false,
            saving: false,
        };

        this.addExercise = this.addExercise.bind(this); 
        this.removeExercise = this.removeExercise.bind(this);
        this.clearExercises = this.clearExercises.bind(this);
        this.startExercises = this.startExercises.bind(this);
        this.updateUrl = this.updateUrl.bind(this);
        this.workoutDone = this.workoutDone.bind(this);
        this._loadExercises = this._loadExercises.bind(this);
        this._exercisesSaved = this._exercisesSaved.bind(this);
    }

    

 


    public render() {
        return this.state.playing ?
            <PlayerContainer pauseBefore={true} onWorkoutDone={this.workoutDone} /> :
            <div className="Screen">
                {this.state.saving ?
                    <CreateWorkoutSaverContainer onSaved={this._exercisesSaved} /> : null}
                <CreateWorkoutLoaderContainer exercises={(this.props.exercises && this.props.exercises.length > 0) ? this.props.exercises.split('') : []} onLoadExercises={this._loadExercises} />
                <div className="Split">
                    <div className="Split__section">
                        <div className="Screen__header">Exercises:</div>
                        <div className="scrollable">
                            <ExerciseListContainer onExerciseClicked={this.addExercise} />
                        </div>
                    </div>
                    <div className="Split__section">
                        <div className="Screen__header">Your challenge:</div>
                        <div className="Screen__controls">
                            <button className="Screen__button" onClick={this.clearExercises}>Clear</button>
                            <button className="Screen__button" onClick={this.startExercises}>Go!</button>
                            <button className="Screen__button" onClick={this.updateUrl}>Save</button>
                            <FacebookShareButton url={location.href}><button className="Screen__button" onClick={this.updateUrl}>Challenge!</button></FacebookShareButton>

I tried:

 <FacebookShareButton url={location.href}><button
 className="Screen__button"
 BeforeOnClick={this.updateUrl}>Save</button>>Challenge!</button></FacebookShareButton>

but BeforeOnClick does not read the URL before the FB page. How can I make the button booth update URL and ClickButton?

How to update URL before OnClick on FacebookShareButton

0 Answers0