Reputation: 149
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
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
Reputation: 342
You should probably be calling blockcreate method in render function.
https://reactjs.org/docs/render-props.html
Upvotes: 0