React: Default Context Value is blank

Question

I'm attempting to set a default value through a context (which I'll later update). However I can't seem to obtain the value in the consumer.

I have a SummaryContext file which contains two default values title and summary. This is used in Body.js and the header value passed on. And finally a Title file which needs to render one of the values.

The line console.log("TITLE.JS: " + {title}); in Title.js prints TITLE.JS: [object Object to the console.

I'm at a loss as to what I've got wrong.

SummaryContext.js

import { createContext } from 'react'

const header = {
  title: "sdlfkjasdf",
  summary: "kmkmkm"
}

export const SummaryContext = createContext(header);

Body

The line <WikiHeader \> contains a reference to the file Title.js which is the file I'm attempting to pass these values to.

import React, {useState} from "react";
import WikiHeader from './wikiheader/WikiHeader'

import {SummaryContext} from "../contexts/SummaryContext"

function Body() {

    const [header, setHeader] = useState(SummaryContext);

  return (

    <>   
      <SummaryContext.Provider value={{header}}>
        <GoogleAd />
        <WikiHeader />    
      </SummaryContext.Provider>

    </>
  );
}

export default Body;

Title.js

import React, {useContext} from "react"
import {SummaryContext} from "../../../contexts/SummaryContext"
import '../../../App.css'

export function Title() {
  const {title, summary} = useContext(SummaryContext);
  console.log("TITLE.JS: " + {title});

  return (
    <div className="container">
      <div className="detailTitle"><span><h3>The title: {title}</h3></span></div>
    </div>

  );
}

score 2 · Accepted Answer · answered Oct 20 '20 at 14:44

const [header, setHeader] = useState(SummaryContext);

This line isn't doing what you want. SummaryContext is an object with a Consumer property and a Provider property, each of which is a react component. You want something like this:

const [header, setHeader] = useState({
  title: "sdlfkjasdf",
  summary: "kmkmkm"
})

If you want that initial state to come from the context file you can, but you'll need to export it, as in:

import { createContext } from 'react'

export const defaultHeader = {
  title: "sdlfkjasdf",
  summary: "kmkmkm"
}

export const SummaryContext = createContext(defaultHeader);

// used like:

import { defaultHeader } from "../contexts/SummaryContext"

// ...

const [header, setHeader] = useState(defaultHeader);

P.S: this line will cause you some trouble:

<SummaryContext.Provider value={{header}}>

Every time Body rerenders, a brand new object is going to be created for the value, which means that every consumer will need to rerender, even if header hasn't changed. If header is the only thing you're providing, i'd recommend doing:

<SummaryContext.Provider value={header}>

Or if you need to wrap it in an object, you should memoize that object:

const value = useMemo(() => {
 return { header };
}, [header]);

// ...
<SummaryContext.Provider value={value}>

React: Default Context Value is blank

SummaryContext.js

Body

Title.js

1 Answers1