React.js: Issue passing a functional prop within same class

Question

In the code below, the prop 'go_to_anchor_link' is not passing. However, the other 2 props are passing to <ChoosePostType /> as expected.

// App.js

// render()
{ ui_store.main_area_sequence === 10 && step1 }

// outside render()
const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link}
            />)}
    />
);

go_to_anchor_link = (anchor_id) => {
    const scroll_target = document.querySelector(anchor_id);
    smoothScroll(scroll_target);
    return false;
};

Am I not passing the functional prop correctly?

EDIT: Posting the full App.js by comment request:

import React, { Component } from 'react';
import './App.css';
import {BrowserRouter, Link, Route} from "react-router-dom";
import {configure} from "mobx";
import  {observer} from "mobx-react";

import {UiStore} from './stores/ui_store'
import {MessageConstructionLogic} from "./stores/message_construction_logic";


// required first
import firebase from 'firebase'
import * as firebaseui from 'firebaseui'


import './assets/react-toolbox/theme.css';
import theme                from './assets/react-toolbox/theme.js';
import ThemeProvider        from 'react-toolbox/lib/ThemeProvider';

import {TopNav}              from './components/TopNav'
import {ChoosePostType}      from "./components/ChoosePostType";
import {KeyPhraseSearch}     from "./components/KeyPhraseSearch";
import {QuestionLeads}       from "./components/QuestionLeads";
import {FinalEditsAndCopy}   from "./components/FinalEditsAndCopy";
import {PostForMeButton}     from './components/PostForMeButton';
import {TurnkeyOfferPitch}   from './components/TurnkeyOfferPitch';
import {LoginOptions}        from './components/LoginOptions';
import {AccountManagerSetup} from './components/AccountManagerSetup';

import {QuestionsStep2} from "./views/QuestionsStep2";

const smoothScroll = require("smoothscroll");
// END of IMPORTS


// STATE CONTAINER SETUP & CONFIG

configure( { enforceActions : true } );
const ui_store = new UiStore();
const message_construction_logic = new MessageConstructionLogic();


// FIREBASE SERVICES: Additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Initialize Firebase
var config = {
    apiKey: "AIzaSyBjzGfi_D6g5hWBYGA4VpM0Uqobh3bqNFA",
    authDomain: "social-post-builder.firebaseapp.com",
    databaseURL: "https://social-post-builder.firebaseio.com",
    projectId: "social-post-builder",
    storageBucket: "social-post-builder.appspot.com",
    messagingSenderId: "913308513340"
};
firebase.initializeApp(config);


// FirebaseUI config.
var uiConfig = {
    signInSuccessUrl: '#create-account', // the root of the URL is auto-appended
    signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        // firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
        // firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>',
    // Privacy policy url.
    privacyPolicyUrl: '<your-privacy-policy-url>'
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);





// EXTERNAL FUNCTIONS ====================================================

const Test = (props) => {
    return <h1>Header from "Test" component</h1>
};



// APP CLASS ==========================================================

class App extends Component {
    constructor(props) {
        super(props);

        this.go_to_anchor_link = this.go_to_anchor_link.bind(this)
    };



    // FUNCTIONS ===========================================

    go_to_anchor_link = (anchor_id) => {
        const scroll_target = document.querySelector(anchor_id);
        console.log(scroll_target);
        // smoothScroll(scroll_target);

        // var broken_anchor_location = document.location.toString().split('#')[0];
        // document.location = broken_anchor_location + '#' + anchor_id;
        return false;
    };


    // RENDER ===========================================

  render() {
      return (
          <BrowserRouter>
          <ThemeProvider theme={ theme }>
                  <div className="App">
                      <TopNav />



                      {/* MAIN AREA FLOW */}

                      { ui_store.main_area_sequence === 10 && step1 }


                  </div>
          </ThemeProvider>
          </BrowserRouter>

      );
  }
}


// RENDER OBJECTS

const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link}
            />)}
    />
);

export default observer(App);

I am using MobX to control the UI state of the main area. There is another store that is being passed to the child component too.

Could you include your entire component, and how you are accessing the props in ChoosePostType? — Tholle
– Tholle, Commented Aug 7, 2018 at 18:21
Ok, I have posted the whole App.js. I intend to access the functional prop using a click handler. Here is that code in the child component: ` <Button size='huge' color='violet' onClick={() => { props.go_to_anchor_link('#question_leads'); props.message_construction_logic.set_flow_choice('question') }} >` — Sean D
– Sean D, Commented Aug 7, 2018 at 18:34

Serdar · Accepted Answer · 2018-08-07 18:36:27Z

1

Please try this modified code. I have put a comment where change are made :

// App.js

// render()
{ ui_store.main_area_sequence === 10 && step1 }

// outside render()
const step1 = (
    <Route
        path="/" exact
        render={() => (
            <ChoosePostType
                ui_store={ui_store}
                message_construction_logic={message_construction_logic}
                go_to_anchor_link={this.go_to_anchor_link} // removed this key word
            />)}
    />
);

const go_to_anchor_link = (anchor_id) => {    // I have put const key word
    const scroll_target = document.querySelector(anchor_id);
    smoothScroll(scroll_target);
    return false;
};

answered Aug 7, 2018 at 18:36

Serdar

4783 silver badges11 bronze badges

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

2 Comments

Sean D Over a year ago

Can you tell me why passing a function works but not passing a method?

Serdar Over a year ago

methods can be declared and passed only inside class components. In your case you declared step1 component as a functional component.

Collectives™ on Stack Overflow

React.js: Issue passing a functional prop within same class

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related