luckydev
luckydev

Reputation: 149

Why am I not getting anything on the screen?

Why am I not getting anything on the screen? Trying to print the result of the filter, but for some reason it is not displayed ... Although, if you use the console, then everything works there and is displayed

function App() {
  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      }
    ]
  };

  const arr2 = {
    projects: [
      {
        id: "random1",
        companyName: "Apple",
        descProjects: "Desc1"
      },
      {
        id: "random2",
        companyName: "Samsung",
        descProjects: "Desc2"
      },
      {
        id: "random3",
        companyName: "Apple",
        descProjects: "Descsssd2"
      }
    ]
  };

  const companies = arr1.company.map(company => company.companyName);
  const projects = arr2.projects.filter(project =>
    companies.includes(project.companyName)
  );

  const blockCreate = () => {
    projects.map(project => {
      console.log(project.descProjects);
      return (
        <div key={project.id}>
          <p>ID {project.id}</p>
          <br />
          <p>{project.companyName}</p>
        </div>
      );
    });
  };

  return (
    <div className="App">
      Hell
      <div>{blockCreate()}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

What solutions does this problem have?

Upvotes: 0

Views: 61

Answers (2)

Max
Max

Reputation: 341

You need to return the array of React elements:

  const blockCreate = () => {
    return projects.map(project => {

Complete snippet:

function App() {
  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      }
    ]
  };

  const arr2 = {
    projects: [
      {
        id: "random1",
        companyName: "Apple",
        descProjects: "Desc1"
      },
      {
        id: "random2",
        companyName: "Samsung",
        descProjects: "Desc2"
      },
      {
        id: "random3",
        companyName: "Apple",
        descProjects: "Descsssd2"
      }
    ]
  };

  const companies = arr1.company.map(company => company.companyName);
  const projects = arr2.projects.filter(project =>
    companies.includes(project.companyName)
  );

  const blockCreate = () => {
    return projects.map(project => {
      console.log(project.descProjects);
      return (
        <div key={project.id}>
          <p>ID {project.id}</p>
          <br />
          <p>{project.companyName}</p>
        </div>
      );
    });
  };

  return (
    <div className="App">
      Hell
      <div>{blockCreate()}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Alternatively you can drop the curly braces and replace them with parentheses to get an implicit return with your arrow function.

Upvotes: 3

aditya
aditya

Reputation: 342

You should probably be calling blockcreate method in render function.

https://reactjs.org/docs/render-props.html

Upvotes: 0

Related Questions