convert angularJS function to a react function

Question

I'm currently trying to use an angular feature, but I cant use ng-click inside an a react app.

I am trying to convert the following function to a react function, I'm aware of axios, not sure how to approach blade variables in react.

I need the angular snippet to do be converted into a react function.

Angular(main.js)

$scope.myfollow = function(user) {
    $http.post('/user/follow/'+ user.id).then(function(result) {
        console.log("user id is:"+ user.id);
    });
};

React file

render(){
    return(

       <div className="followdoe">      
            <button  onClick={ this.btnClick.bind(this) } className={this.state.className}>
                   <p>{ this.state.btnText }</p>
            </button>
       </div>


    )
}

Route.php

Route::post('user/follow/{id}', 'UserController@my_follow');

Profile.blade.php

<div style="margin:30px 0px;">

    <button class="follow-button" ng-click="myfollow({{$user}});">+ Follow</button>
</div>

UserController.php

    public function my_follow(Request $request, $id)
    {
        $user = auth()->user();

        if($user->id != $id && $otherUser = User::find($id)){

            $user->toggleFollow($otherUser);
        }

    }
   public function getProfile($user)
    {  
        $user = User::with(['posts.likes' => function($query) {
                            $query->whereNull('deleted_at');
                        }, 'follow','follow.follower'])
                      ->where('name','=', $user)->first();



        if(!$user){
            return redirect('404');
        }

        return view ('profile')->with('user', $user);
    }

Your question is about how you should port your angular myfollow function to React. I'm not sure how your data looks beyond that, I'm afraid. — Tholle
– Tholle, Commented Jul 7, 2018 at 23:28
What data ? i just want a way to make the same angular function but in react, would you have an idea on how to do that ? thanks tholle — BARNOWL
– BARNOWL, Commented Jul 7, 2018 at 23:31

Tholle · Accepted Answer · 2018-07-07 23:51:21Z

1

You could create a function on your component and use the fetch API.

Example

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      className: "test",
      btnText: "Text",
      user: { id: 123 }
    };
    this.myfollow = this.myfollow.bind(this);
    this.btnClick = this.btnClick.bind(this);
  }

  myfollow(user) {
    fetch(`/user/follow/${user.id}`, { method: "POST" })
      .then(response => response.json())
      .then(response => {
        console.log(response);
      });
  };

  btnClick() {
    this.myfollow(this.state.user);
  };

  render() {
    return (
      <div className="followdoe">
        <button onClick={this.btnClick} className={this.state.className}>
          <p>{this.state.btnText}</p>
        </button>
      </div>
    );
  }
}

edited Jul 7, 2018 at 23:51

answered Jul 7, 2018 at 23:35

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

BARNOWL Over a year ago

the my follow function is giving a syntax error, im trying to figure it out

BARNOWL Over a year ago

unexpected token somewhere near myfollow = user

Tholle Over a year ago

@BARNOWL Alright. I updated the answer. You might not have class fields in your development environment, which my previous version of the answer used.

BARNOWL Over a year ago

perfect, it build successful let me give this a shot.

Tholle Over a year ago

@BARNOWL Yes, that's what my second question above was about. Do you have the user data in your React component? Since you use user.id in your angular code, you need the user.id for the URL.

|

Collectives™ on Stack Overflow

convert angularJS function to a react function

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related