CODEWITHSUNDEEP
javascriptreactjs
Danks
Danks

Reputation: 113

React Pass Props to a Stateless Functional Component

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

Upvotes: 3

Views: 3520

Answers (3)

Codex
Codex

Reputation: 1281

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

Upvotes: 1

Basir Baig
Basir Baig

Reputation: 111

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>
    );
  }

Upvotes: 2

bkm412
bkm412

Reputation: 1057

If you want to pass props, set attribute to Component

<AuthLink notificationCount={...} />

Upvotes: 0

Related Questions