React Pass Props to a Stateless Functional Component

Question

The AuthLinks component should render the value from the notificationCount prop in the notificationCount on Notifications Component

I'd like to get the value from notificationCount to AuthLinks component, but as is a value from a variable seems that should be on AuthLinks.

const AuthLinks = props => {
  return (
    <div>
      <NavLink to="/notifications">
        Notifications
        <span  data-badge={props.notificationCount} />
      </NavLink>

    </div>
  );
};


import React, { Component } from "react";
import { Link } from "react-router-dom";


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

    this.state = {
      notifications: [],

    };
  }

  componentWillMount() {
    fetch("/notifications")
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({ notifications: data });
      });

  }



  render() {

    let notificationCount = this.state.notifications.length;
    let notifications = this.state.notifications.map(notification => {
      return (
        <ul>
          <li>
            <Link to={`/posts/${notification.post.title}`}>


              <div>

                {notification.post.title}
              </div>

            </Link>

          </li>
        </ul>
      );
    });

    return (
      <div className="column col-9">

          {notificationCount}
          {notifications}

      </div>
    );
  }

export default Notifications;

Show no error messages but, did not render the value either

Answer 1

hello in your Notificatiions component you have not passed any props to Authlinks functional component.

if I am not wrong your Notifications component should look like this if you want to pass props to Authlinks

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Authlinks from 'your path'

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

    this.state = {
      notifications: [],

    };
  }

  componentWillMount() {
    fetch("/notifications")
      .then(response => {
        return response.json();
      })
      .then(data => {
        this.setState({ notifications: data });
      });

  }



  render() {

    let notificationCount = this.state.notifications.length;
    let notifications = this.state.notifications.map(notification => {
      return (
        <ul>
          <li>
            <Link to={`/posts/${notification.post.title}`}>


              <div>

                {notification.post.title}
              </div>

            </Link>

          </li>
        </ul>
      );
    });

    return (
      <div className="column col-9">

          {notificationCount}
          {notifications}
          <Authlinks notificationCount={notificationCount}/>
      </div>
    );
  }

Answer 2

Another elegant way to do the same.

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Counter(props) {
  const {
    count: [count, setCount]
  } = {
    count: useState(0),
    ...(props.state || {})
  };

  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h2>Lifted state</h2>
      <Counter state={{ count: [count, setCount] }} />
      <Counter state={{ count: [count, setCount] }} />
      <h2>Isolated state</h2>
      <Counter />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

More : https://codesandbox.io/s/z3431proxl?from-embed